addClass using jquery

Neil_Bradley
Neil_Bradley used Ask the Experts™
on
Hi All,
the following link http://www.beaconhilldesign.co.nz/~statusco/test.html will take you to a page showing a simple jquery, css accordion menu.
class="active" has been applied to the li of the open tab.
I would like to add the active class to whichever li tag is open (and remove it from the original active li).
The end game is to use css to highlight the open tab.
Can anyone assist?
Cheers,
N
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Russ SuterSenior Software Developer

Commented:
Give your <ul> tag an "id" attribute so you can easily find it. Then just iterate through the child elements calling $(element).addClass("active") or $(element).removeClass("active") as appropriate.

As an alternative you could add an onclick event listener to each <li> as follows:

<li onclick="setActive(this, event);">

then your method would look like this:

function setActive(sender, eventArgs)
{
  var parentObject = sender.parent();
  for (var i = 0; i < parentObject.children().length; ++i)
  {
    parentObject.children()[i].removeClass("active");
  }
  sender.addClass("active");
}

Open in new window


I'm pretty sure that will work. I just rattled it off the top of my head and haven't tested it yet.
Neil_BradleyWeb UX/UI Developer

Author

Commented:
Ok,
I came up with this and it seems to work.
/*jQuery time*/
$(document).ready(function(){
	$("#accordian h3").click(function(){
		//slide up all the link lists
		$("#accordian ul ul").slideUp();
		//slide down the link list below the h3 clicked - only if its closed
		if(!$(this).next().is(":visible"))
		{
			$(this).next().slideDown();
			$("#accordian li").next().addClass("active");
		}
	})
	$('#accordian li').click(function() {
    $('li.active').removeClass('active');
    $(this).closest('li').addClass('active');
});
})

Open in new window


I know there is always more than one way to skin a cat so Id be keen to see if there was a better solution..
I think you can put the addClass and RemoveClass calls in your original click function.

$(document).ready(function(){
   $("#accordian h3").click(function(){
      //here
      $('li').removeClass('active'); 
      $(this).parent('li').addClass('active');
      
      //slide up all the link lists
      $("#accordian ul ul").slideUp();
      //slide down the link list below the h3 clicked - only if its closed
      if(!$(this).next().is(":visible"))
      {
         $(this).next().slideDown();
      }
   })
})

Open in new window

Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
You could also look at the JQueryUI (jqueryui.com) accordian that is a tried and tested solution.
Neil_BradleyWeb UX/UI Developer

Author

Commented:
Hi All,
none of the code suggestions actually worked so I was resolved to stick with my own code until I read Julian's comment re using the existing jquery UI library. After a little tinkering this ended up as the perfect solution.
Was no need to re invent the wheel after all.
Cheers,
N

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial