asked on

jQuery Toggle - How to keep/retain the current class after toggle.

I'm using a unordered list as a drop down menu. When the user selects their color choice the toggle occurs as intended but it removes the current class of the selected item. I would like to retain the current class but also add the new class. Hopefully I'm explaining this correctly. Let me know if you need me to clarify anything.

The List:
<ul class="singleSelect">
<li class="init">CHOOSE COLOR</li>
<li class="red-sq" data-value="Red">RED</li>
<li class="black-sq" data-value="Black">BLACK</li>
<li class="green-sq" data-value="Green">GREEN</li>
<li class="blue-sq" data-value="Blue">BLUE</li>
</ul>

After they select a color (i.e. Black) it looks like this:
<ul class="singleSelect">
<li class="init">BLACK</li>
<li class="red-sq" data-value="Red">RED</li>
<li class="black-sq" data-value="Black">BLACK</li>
<li class="green-sq" data-value="Green">GREEN</li>
<li class="blue-sq" data-value="Blue">BLUE</li>
</ul>

I want it to look like this:
<ul class="singleSelect">
<li class="init black-sq">BLACK</li>
<li class="red-sq" data-value="Red">RED</li>
<li class="black-sq" data-value="Black">BLACK</li>
<li class="green-sq" data-value="Green">GREEN</li>
<li class="blue-sq" data-value="Blue">BLUE</li>
</ul>

<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$("ul.singleSelect").on("click", ".init", function() {
    $(this).closest("ul.singleSelect").children('li:not(.init)').toggle();
});

var allOptions = $("ul.singleSelect").children('li:not(.init)');
$("ul.singleSelect").on("click", "li:not(.init)", function() {
    allOptions.removeClass('selected');
    $(this).addClass('selected');
    $("ul.singleSelect").children('.init').html($(this).html());
    allOptions.toggle();
});


$("#submit").click(function() {
    alert("The selected Value is "+ $("ul").find(".selected").data("value"));
});

});//]]> 

</script>

Open in new window

Julian Hansen

What you are wanting to do is to give the .init <li> the same class as the clicked one - but then you would need to know what the class was to add it and to remove it when another item is checked.
Much easier to simply clone the clicked element, give it the .init class and then remove the existing init

$("ul.singleSelect").on("click", "li:not(.init)", function() {
  allOptions.removeClass('selected');
  $(this).addClass('selected');
  // CLONE
  var newinit = $(this).clone().addClass('init');
  // REMOVE EXISTING
  $('.init').remove();
  // PUT IT BACK
  $("ul.singleSelect").prepend(newinit);
  allOptions.toggle();
});

Open in new window

Kim Walker

I'm not sure I understand your question. In your before and after example above, the only difference is that the content of the first <li> element has changed from "CHOOSE COLOR" to "BLACK". Yet you say

it removes the current class of the selected item

The selected item would be the third <li> element which still has its original class of black-sq.

In the jQuery code you have provided, the only class modification is to remove or add the class selected. But in the before and after samples you've provided, none of the classes have changed. And the desired result doesn't show any elements with the selected class.

In my testing, though, the third <li> element does, indeed, have both the black-sq and selected classes. In further testing, it appears that the code does exactly what it is programmed to do.

Please elaborate on what is happening for you that is not what you expected. Based on your desired result, Julian Hansen has provided code above to produce exactly that. But your sample code suggests there are other considerations to deal with.

swaggerking

ASKER

Thanks Julian & Kim for your responses.
I couldn't get Julian's example to work due to not being as clear as I should have been with what I'm trying to accomplish. Let me try this again.

I have a drop down menu for selecting a color. The default first <li> is:
<li class="init">CHOOSE COLOR</li>

When the user clicks on the drops down list and chooses a color (i.e. Black) I would like the <li> class to change to:
<li class="init black-sq">BLACK</li> instead of <li class="init">BLACK</li>

I want the selected <li> to keep its current class but append/add ".inet" which is not currently happening. It's removing the class and replacing it with just ".inet". I want it to be the color class and the inet class. Make sense?
I'm attaching basic html example.
colorlist.html

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

Kim Walker

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

swaggerking

ASKER

Julian and Kim,
Thank you. Your solution(s) was exactly what I was looking for. Your included explanation of the solution was beneficial to me as well. Have a great day.

Julian Hansen

NB posted code did not include a submit button - not clear as to the requirement so a lot of guessing going on.

The selected item is always the first item so you can can get it by

$('li:first-child').data('value');

Open in new window

So this works

	$("#submit").click(function() {
		alert("The selected Value is "+ $("li:first-child").data("value"));
	});

Open in new window

No need for the selected class - I have updated the sample

swaggerking

ASKER

Thanks again!

Julian Hansen

You are welcome.