Javascript: Expand / Collapse Multiple DIV's with simple code?

Question

I have several DIVs on my page that I would like to be able to expand / collapse. I'm using the code below to do so, but it only applies to an entire class.. Can I apply it to whatever is being clicked? (for example, self.slideToggle();)

// Activate Toggle for Showing / Hiding More Price Tables
        $(".slidingDiv").hide();
        $(".show_hide").show();

    $('.show_hide').click(function(){
    $(".slidingDiv").slideToggle();
    return false;
    });

});

EDIT: Here is an example of markup:

<a href="#" class="show_hide">Video & Music</a>
    <div class="slidingDiv">CONTENT HERE</div>

Answer 1

This will work.

$('.show_hide').click(function(){
      $(this).next('.slidingDiv').slideToggle();
      return false;
});

jsfiddle - http://jsfiddle.net/ABrunkhorst/vFnqp/1/

Answer 2

use $(this) inside the click event.

or if you click on something in the div then something like the parent keyword.

so $(this).parent(".slidingDiv").slideToggle();

edit

you could i think also use this, based on your edit;

$(this).next('.slidingDiv')

Answer 3

Using $(this) inside the function call will reference the object in scope, in this case the one being clicked.

$('.show_hide').click(function(){
   $(this).next('.slidingDiv').slideToggle();
   return false;
});

Instead of next() you may consider:

• children() - to only select the first level of children
• contents() - if you're trying to get all descendents (children + children of children) of the element being clicked
• siblings() - to get all elements that are on the same level in the hierarchy tree
• prev() - to get the previous sibling
• next() - to get the first sibling
• prevAll() - to get all the previous siblings
• nextAll() - to get all the next siblings
• parents() - to get the anscestors (wrappers) of the clicked element

Answer 4

We can make use of JQUERY UI Accordion using which we can efficiently toggle. We must add the following JQuery links

   <script src="//code.jquery.com/jquery-1.10.2.js"></script>
   <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <script>  $(function() {   
    $( "#accordion" ).accordion(); 
    });  
   </script> 
   <div id="accordion"> 
   <h3>Section 1</h3>
   <div>   
   <p>This is division 1  
   </p></div>  
   <h3>Section 2</h3>
   <div>
   <p>This is division2</p></div>

For more details Refer this http://jqueryui.com/accordion/