Trying to toggle multiple DIV's with Jquery

Question

Hello All,

I have been trying to get this function to work for awhile now. I have 11 different divs that are hidden by default. Each have a "trigger" button that is supposed to get them to pop open. I was able to do this with a much longer series of functions for each specific div (which ended up being about 175 lines of code!). I wanted to condense it down into a single function that would do the same thing ie: trigger 1 is clicked - div 1 opens/ trigger 1 is clicked again, div 1 closes etc, etc.

Here is my script as of now

 $(document).ready(function() {

    $("[class^='ShowVehicles']").toggle(function() {
 alert("click happened");
  $("[class^='HiddenVehicles']").slideDown(1000);

    }, 
  function () {
  $("[class^='HiddenVehicles']").slideUp(1000);


 });


});

It's currently opening all "HiddenVehicles" divs and I need to make it more specific. I'm fairly new to jquery so I have pretty much run out of ideas. Thanks in advance guys!

Edit - Thanks for all the help guys, here's the solution I came up with:

 $(document).ready(function() {

    $("div.WrapIt").toggle(

 function(){ $(".HiddenVehicles", this).slideDown(1000);
 $("img.imgSwap" , this).attr("src","assets/images/SelectBySize/SelectBySize_HideAll.gif");
  },

 function(){ $(".HiddenVehicles", this).slideUp(1000);
 $("img.imgSwap" , this).attr("src","assets/images/SelectBySize/SelectBySize_ShowAll.gif")
 }

);

  $(".ShowEveryThing").toggle(
 function() { $(".WrapIt .HiddenVehicles").slideDown(1000);
 $("img.imgSwap").attr("src","assets/images/SelectBySize/SelectBySize_HideAll.gif");
 $("img.buttonSwap").attr("src","assets/images/SelectBySize/SelectBySize_HideBtn.gif");
  },
   function(){ $(".WrapIt .HiddenVehicles").slideUp(1000);
    $("img.imgSwap").attr("src","assets/images/SelectBySize/SelectBySize_ShowAll.gif");
 $("img.buttonSwap").attr("src","assets/images/SelectBySize/SelectBySize_ShowBtn.gif");
   });

});

I created a wrapper div and had the function fire when that div was clicked. I also included some image swapping and a show all function.

Answer 1

What you would want to do is get a reference to a specific <div> from within the function you've defined. Within the defined functions you should be able to get a reference to the button using $(this). Depending on your formatting you should now be able to get the

Say your markup is:

<div>
    <input type="button" class="ShowVehicles" />
    <div class="HiddenVehicles"></div>
</div>

You could now change your code to something like the following:

$(".ShowVehicles").toggle(function() {
        $(this).siblings(".HiddenVehicles").slideDown(1000);
    }, 
    function () {
        $(this).siblings(".HiddenVehicles").slideUp(1000);
    }
});

The key here is the call to siblings(), this will return all the elements that are "next" to the button (and then filter by class HiddenVehicles), which in this case is just your <div>. Depending on how they are positioned to each other you may however need to use one of the other jQuery traversing functions.

Answer 2

You need to somehowe tie the show/hide buttons to their respective divs that they will act on.

You can do this by encapsulating them inside a single <LI> element or giving them common IDs to identify which button controls which div.

Here's the <LI> example:

<ul id="playground">
  <li>
    <div>HELLO WORLD 1</div>
    <button>Show/Hide 1</button>
  </li>
  <li>
    <div>HELLO WORLD 2</div>
    <button>Show/Hide 2</button>
  </li>
  <li>
    <div>HELLO WORLD 3</div>
    <button>Show/Hide 3</button>
  </li>
</ul>

And the jQuery functionality would be:

jQuery("#playground button").click(function(){
  $(this).closest("div").toggle()
})

The JS code greatly depends on what your HTML structure is so if you decide to make it significantly different then some of the jQuery selectors will need to be adjusted

Answer 3

Try this:

<span class="header">Item1</span>
<p style="display: none;">This is the content of item1...</p>
<span class="header">Item2</span>
<p style="display: none;">This is the content of item2...</p>

---

$(".header").click(function() { $(this).next("p").slideToggle("slow"); });