Link to home
Start Free TrialLog in
Avatar of Neil_Bradley
Neil_BradleyFlag for New Zealand

asked on

addClass using jquery

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
Avatar of Russ Suter
Russ Suter

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.
Avatar of Neil_Bradley

ASKER

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

ASKER CERTIFIED SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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