Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

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

Posted on 2016-09-12
9
Medium Priority
?
100 Views
Last Modified: 2016-09-13
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

0
Comment
Question by:swaggerking
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
  • 2
9 Comments
 
LVL 59

Expert Comment

by:Julian Hansen
ID: 41795577
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

0
 
LVL 22

Expert Comment

by:Kim Walker
ID: 41796144
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.
0
 

Author Comment

by:swaggerking
ID: 41796382
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
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 59

Accepted Solution

by:
Julian Hansen earned 1800 total points
ID: 41796496
I think I understood your requirement - I implemented your code locally to see what it does and then modified it to do what you wanted.

Here is the sample I put together - without your styles which I had to guess.
I took the code I posted above and added it to the source you posted. The problem was that you are adding and removing a selected class that is interferring - I removed those two lines and got this sample
JQuery
$(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() {
	// REMOVED THESE
	//  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();
	});

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

});

Open in new window

1
 
LVL 22

Assisted Solution

by:Kim Walker
Kim Walker earned 200 total points
ID: 41796511
I tested Julian's code also and it works for me. The only thing I would add to Julian's last comment is that the submit click event will not work without the selected class. I have moved the line to add the selected class near the bottom.
$(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');
		// CLONE
		var newinit = $(this).clone().addClass('init');
		// REMOVE EXISTING
		$('.init').remove();
		// PUT IT BACK
		$("ul.singleSelect").prepend(newinit);
		$(this).addClass('selected');
		allOptions.toggle();
	});
	
	$("#submit").click(function() {
	    alert("The selected Value is "+ $("ul").find(".selected").data("value"));
	});

});

Open in new window

1
 

Author Comment

by:swaggerking
ID: 41796523
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.
0
 
LVL 59

Expert Comment

by:Julian Hansen
ID: 41796533
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
1
 

Author Closing Comment

by:swaggerking
ID: 41796583
Thanks again!
0
 
LVL 59

Expert Comment

by:Julian Hansen
ID: 41796719
You are welcome.
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

618 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question