Expand / Collapse jQuery

I'm working on an online shopping website. I have an expand / collapse jQuery setup. But ideally I would like it to be when the user clicks collapse, the full list of shopping cart items collapses to be invisible. At the moment, if the user has more than one item in开发者_运维问答 their shopping cart, it only closes the 1 item.

How do I cascade this to close ALL the items?

Example is here

---

Try using:

$(".toggle_container").slideToggle('2000');

At the moment your code just finds the first item and slides it up.

You could also enclose all the items in a master div and animate that instead for the same effect:

<div class="order_items">
    <div class="toggle_container">...</div>
    <div class="toggle_container">...</div>
    <div class="toggle_container">...</div>
</div>

With the following JS:

$(".order_items").slideToggle('2000');

---

Place all the elements you want to collapse in the container you're targeting with jQuery. In this case: .toggle_container.

Pseudo markup:

<div class="toggle_container">
   <div class="product"></div>
   <div class="product"></div>
   <div class="product"></div>
</div>

---

According to the script, it changes the state of the next element. You need to re-write the HTML to include a wrapper div around the items and reassign the script to collapse the wrapper.

jQuery:

    $("h2.trigger").click(function(){
        $(".items_wrapper").slideToggle(2000);
        return false; //Prevent the browser jump to the link anchor
    });

HTML:

<h2 class="trigger"><a href="#">Click me!</a></h2> 

<div class="items_wrapper">
    <div class="toggle_container">...</div>
    <div class="toggle_container">...</div>
    <div class="toggle_container">...</div>
</div>

Example for you here.