Develop Reference

Toggle one of two classes with JavaScript

So I am creating this button that expands when clicked and hides data when clicked again. I have made it work, but it was working only one time before refresh, then I figured I need to take a different approach, by toggling class on the button itself, not the div where data appears. And my problem is, that to do so I need to toggle only one of two classes the button has with javascript. How do I do that?
const expandMovies = document.querySelector("#btnMovies");
expandMovies.addEventListener("click", toggleMovies)
function toggleMovies() {
if (expandMovies.classList.contains("inactive")) {
getMovies();
expandMovies.classList.toggle("active");
} else {
parentMovies.style.display="none";
expandMovies.classList.toggle("inactive");
}
};

You can use second property of toggle method which forces to remove or add class forcibly. Following is the code snippet which can helpful for you.
const expandMovies = document.querySelector("#btnMovies");
expandMovies.addEventListener("click", toggleMovies)
function toggleMovies() {
if (expandMovies.classList.contains("inactive")) {
getMovies();
expandMovies.classList.toggle("inactive",false);
expandMovies.classList.toggle("active",true);
} else {
parentMovies.style.display="none";
expandMovies.classList.toggle("active",false);
expandMovies.classList.toggle("inactive",true);
}
};

How to store JS slideToggle in localStorage only for clicked button

I have several buttons including divs which they have the same name. unfortunately I can not change the names, they are generated by cms.
So for example when I click only on first button, only the first div is hidden or displayed, and that's fine.
But after refresh page it opens or closes all divs depending is the first div closed or opened, and that I do not want it.
here is the code:
<button class="a">Button</button>
<div class="target"></div>
<button class="a">Button</button>
<div class="target"></div>
$('.a').click(function() {
$(this).next(".target").slideToggle(function() {
localStorage.setItem('visible', $(this).is(":visible"));
});
});
$('.target').toggle(localStorage.getItem('visible') === 'true');
here you can see jsfiddle example: https://jsfiddle.net/pj3gs0z9/3/
So my question is, is it possible to store only clicked button information, and after page refresh display or hide div from only clicked button ?
Thank you

It is possible, but probably not in your case. If you tell us you can't change your button properties, and they are exactly the same, then you won't be able to store different data in your localStorage.
Isn't there any way where you can add some additional information to your button ? It could be a class, an id, a name, or even a data-XXX attribute.
By the way, how are your buttons generated ? are they hard coded, or fetched from a database, or ... ?
EDIT
Here is a way of adding different classes to all of your buttons (althoguh I recommend adding data attributes, but whatever floats your boat) :
let buttons = document.getElementsByTagName('button'); // Array of your buttons
let index = 0;
for (let button of buttons) {
button.className += 'myCustomClass-' + ++index; // Add a custom class to your buttons
}
// Now in your local storage, you can store the class of the button !
EDIT 2 I would store it like this :
// On click, in VanillaJS (sorry, haven't used JQuery in a while)
button.onclick = () => {
let visibleButtons = localStorage.getItem('visible-buttons') || [];
visibleButtons.push(button.className.match(/(myCustomClass-[0-9]*)/)[0]);
}

This is one quick solution, but because of a slideToggle you gonna have a small flash of milliseconds of a visible div unless you first have them hidden and then based on localStorage display them.
$('.a').click(function() {
$(this).next(".target").slideToggle(function() {
localStorage.setItem('visible-' + $(this).index(), $(this).is(":visible"));
});
});
$.each($('.target'), function(k, trg) {
$(trg).toggle(localStorage.getItem('visible-' + $(trg).index()) === 'true');
});

jcarousel images disappear after scroll event

I have an autocomplete text input that triggers a slider using jcarousel to scroll to the image of the selected person. The problem is, if you search once, it works, but searching again makes all the images disappear.
Here is the code that controls the input:
jQuery('#team_select2').change(function() {
var idx = $('#team_select2').val();
if(idx == '')
{
carousel.scroll(1);
$('.details').hide();
return false;
}
carousel.scroll(idx);
$('.details').hide();
$('#'+idx+'_details').show();
});
You can see it breaking in action if you go to http://welchhornsby.com/new-team-page/ and try searching for two of the people in the list.
Anyone have any idea why it would be breaking like that?

Found the answer right after posting this. Just changed the 4th to last row from carousel.scroll(idx); to carousel.scroll(idx*1);

Javascript rating system

I am not a javascript guru so please be patient with me.
I was looking for a good rating with js and I ran to the his blog:
http://www.marcofolio.net/webdesign/jquery_quickie_colourful_rating_system_with_css3.html
The author has a demo and has provided the code to download.
it looks really nice except the fact that it doesn't have the example for saving the colors. Therefore the colors are back to black (default color) once user moves the mouse away.
any idea how to have the colors fixed?

In addition to the code TimDog has added:
adding
_rated = false;
to
$(".fav_rating li label").hover(function() {
resets the colors every time user hovers over the ratings. Then when they click _rated is set to true and therefore prevents the color change
in addition, i used a hidden input in my form that will contain the value of the rating. To do this my .click looks like following:
$(".fav_rating li label").click(function(e) {
e.preventDefault();
_rated = true;
$("#item_fav_rating").val($(this).parent().index() + 1)
});

Here's one way -- I took a closer look at the script.js in the example code:
Add this global variable under animationTime
var _rated = false;
The colors are reset here -- see how I've used the _rated variable?
// Restore all the rating to their original colours
if (_rated) $("#rating li a").stop().animate({ backgroundColor : "#333" } , animationTime);
Then in your click handler:
//Prevent the click event and show the rating
$("#rating li a").click(function (e) {
e.preventDefault();
_rated = true;
//alert("You voted on item number " + ($(this).parent().index() + 1));
});
This will keep the colors highlighted. It will be reset when you refresh the page or rerun the reset animation line above.
Hope this helps.

I havent seen the code of the blog you mentioned, but it seems when user clicks on any button it is showing alert ie, onclick() is used. so you can have one global variable which will save the number and there itself you can add code to keep the color.

Google maps api with destination textboxes

Here is a link to my code: http://www.canning.co.nz/Mapping/Code.txt
Sorry, it is in text format, for some reason I had some trouble in pasting it into this forum.
It is working nicely. However, I am after a little bit of help with a problem that I am having. Currently, the textboxes come up for the start and destination after I click on a button. I am wanting to have these textboxes all display when the page loads and then just press on the button and the route will be displayed.
Can I please have some help with this? Or is there a better example that I can have a look at somewhere on the net?
thanks

You can adapt your current example to work this way. First you need a couple more JavaScript functions. You can place these below the directions() function.
JavaScript:
function searchFunc(point) {
if (point) {
if (state==1) {doEnd(point)}
if (state==0) {doStart(point)}
} else {
var result=geo.getCache().get(search);
if (result) {
var reason="Code "+result.Status.code;
if (reasons[result.Status.code]) {
reason = reasons[result.Status.code]
}
} else {
var reason = "";
}
alert('Could not find "'+search+ '" ' + reason);
}
}
function GLoad() {
var search = document.getElementById("search").value,
search2 = document.getElementById("search2").value;
addresses[0] = search;
addresses[4] = search2;
geo.getLatLng(search, searchFunc);
geo.getLatLng(search2, searchFunc);
}
Next you need to remove the three calls to handleState(). There is one call right below the function declaration. The other two are in doStart() and doEnd(). You can also remove the function itself. This function was doing the show/hide of the fields and buttons.
Finally, you need to update the tag to call GLoad().
<body onload="GLoad()" onunload="GUnload()">
Now if you click Get Directions the page should function the same as before, except we've taken care of the first couple button clicks and all the fields remain visible.
You probably want to also remove the buttons for "Find start address" and "Find destination address" but I wasn't sure. Removing them is as simple as removing the buttons from the HTML.
Feel free to ask any questions. I hope that helps!