Hi!

I found a script to hide and show a content using .slideToggle(). I have many element to hide and show. The problem is that all my different contents were showing at the same time. To make sure that just one single content is shown, I tried to use .next(). Unfortunately, it doesn't work. My .toggle_container div still closed.

How can I make it work?
Thanks!

Here is my js :

1. $(document).ready(function() {
2.   $('.toggle_container').hide();
3.    
4.     $('a.trigger').click(function() {
5.         $(this).next('.toggle_container').slideToggle('slow');
6.         return false;
7.       });
8. });

and that is my html:

1.                         <div class="grid-12">
2.                             <h1><a href="#" class="trigger">link01</a></h1>
3.                             <div class="grid-10 toggle_container">
4.                                 text to show or hide01
5.                             </div>
6.                             <h1><a href="#" class="trigger">link02</a></h1>
7.                             <div class="grid-10 toggle_container">
8.                                 text to show or hide02
9.                             </div>
10.                             <h1><a href="#" class="trigger">link03</a></h1>
11.                             <div class="grid-10 toggle_container">
12.                                 text to show or hide03
13.                             </div>
14.                         </div>