I'm trying to find the element using jQuery from the following html.

<ul class="gdl-toggle-box">
   <li class="">
      <h2 class="toggle-box-title"><span class="toggle-box-icon"></span>Volunteer Form</h2>
      <div class="toggle-box-content" style="">
      </div>
   </li>
</ul>

What I'm looking to do is when the h2 is clicked find the li above the h2 add a class active to it. Tried a few different calls but no luck. EDIT

The biggest issue is that there are multiple toggle boxes on a page so something like this works on pages with a single toggle but pages with multiple the result is they all open together.

var gdl_toggle_box = jQuery('ul.gdl-toggle-box');
gdl_toggle_box.find('li').each(function(){
    jQuery(this).addClass('item');
});
gdl_toggle_box.find('li').not('.active').each(function(){
    jQuery(this).children('.toggle-box-content').css('display', 'none');
});
gdl_toggle_box.find('h2').click(function(){
    if( jQuery('.item').hasClass('active') ){
         jQuery('.item').removeClass('active').children('.toggle-box-content').slideUp();
    }else{
         jQuery('.item').addClass('active').children('.toggle-box-content').slideDown();
    }
});

I'm trying to find the element using jQuery from the following html.

<ul class="gdl-toggle-box">
   <li class="">
      <h2 class="toggle-box-title"><span class="toggle-box-icon"></span>Volunteer Form</h2>
      <div class="toggle-box-content" style="">
      </div>
   </li>
</ul>

What I'm looking to do is when the h2 is clicked find the li above the h2 add a class active to it. Tried a few different calls but no luck. EDIT

The biggest issue is that there are multiple toggle boxes on a page so something like this works on pages with a single toggle but pages with multiple the result is they all open together.

var gdl_toggle_box = jQuery('ul.gdl-toggle-box');
gdl_toggle_box.find('li').each(function(){
    jQuery(this).addClass('item');
});
gdl_toggle_box.find('li').not('.active').each(function(){
    jQuery(this).children('.toggle-box-content').css('display', 'none');
});
gdl_toggle_box.find('h2').click(function(){
    if( jQuery('.item').hasClass('active') ){
         jQuery('.item').removeClass('active').children('.toggle-box-content').slideUp();
    }else{
         jQuery('.item').addClass('active').children('.toggle-box-content').slideDown();
    }
});

• javascript
• jquery

• 2 it's not above, it's inside. children of a parent. Now all you can do is search SO for that exact questions. – Roko C. Buljan Commented May 7, 2013 at 23:38

5 Answers 5

You can use closest.

closest will match the first parent element that matches the selector traversing up the DOM tree.

Demo

$('h2.toggle-box-title').click(function(){
   $(this).closest('li').addClass('active');
});

Try this.

$('h2.toggle-box-title').click(function(){
   $(this).parent().addClass('newclass');
});

try this:

$('h2.toggle-box-title').click(function() {
    $(this).parent('li').addClass('active');
});

On you click in the button you can use the event:

$("something").parent().find("h2.myClass");
// And if you want you can add class after you find you object

http://api.jquery./find/

Selecting an element's parent

In order to select an element parent, you can use the parent() function.

Try this:

$('h2.toggle-box-title').click(function() {
    $(this).parent('li').addClass('active');
});

*to be more specific, you target the parent you would like to choose by specifying its selector

Check the jQuery API Documentation here

parent() - Get the parent of each element in the current set of matched elements, optionally filtered by a selector.