Avatar of Neil_Bradley
Neil_Bradley
Flag 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
jQuery

Avatar of undefined
Last Comment
Neil_Bradley

8/22/2022 - Mon
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.
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..
buttonMASTER

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

All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck
ASKER CERTIFIED SOLUTION
Julian Hansen

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
Neil_Bradley

ASKER
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