Question

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

Answer 1

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');