Using jQuery to toggle one item at a time

Question

I have a series of divs that are hidden and I would like to be able to toggle their visibility individually.

The HTML:

        <h2>Section One</h2>
    <p>In luctus ullamcorper urna suscipit fringilla. Nulla facilisi. Curabitur dui nulla, interdum eget vehicula mollis, mollis at quam. Vestibulum scelerisque volutpat tortor, vel euismod nulla cursus quis. Cras quis mattis leo.</p>
    <input type="button" class="show-video" value="Video" />
    <div class="video-holder"></div>

    <h2>Section Two</h2>
    <p>In luctus ullamcorper urna suscipit fringilla. Nulla facilisi. Curabitur dui nulla, interdum eget vehicula mollis, mollis at quam. Vestibulum scelerisque volutpat tortor, vel euismod nulla cursus quis. Cras quis mattis leo.</p>
    <input type="button" class="show-video" value="Video" />
    <div class="video-holder"></div>

    <h2>Section Three</h2>
    <p>In luctus ullamcorper urna suscipit fringilla. Nulla facilisi. Curabitur dui nulla, interdum eget vehicula mollis, mollis at quam. Vestibulum scelerisque volutpat tortor, vel euismod nulla cursus quis. Cras quis mattis leo.</p>
    <input type="button" class="show-video" value="Video" />
    <div class="video-holder"></div>

The jQuery:

<script type="text/javascript">
   $(document).ready (function() {
     $('.video-holder').hide();
     $('.show-video').click(function () { 
     $('.video-holder').toggle('slow');
    });
   });
</script>

I would appreciate some help in getting them to toggle one at a time.

Thanks.

Answer 1

Sounds like you want the accordion from jquery UI.

Answer 2

Here's a little trick:

<script type="text/javascript">//<!--

   $(document).ready (function() {
     $('.video-holder').hide();
     var i = 0;
     $('.show-video').each(function(){
         $(this).click(function(){ 
             $('.video-holder:eq('+$(this).data('idf')+')').toggle('slow');
         });
         $(this).data('idf',i);
         i++;
    });
   });

// --></script>

Makes use of data and so on.

Answer 3

The problem is that jQuery is being helpful and assuming that you want to toggle all of the elements with the video-holder class. (You make use of that assumption earlier when you hide every video holder with $('.video-holder').hide();.

If you want to bind each .show-video element to show only the video immediately following it then you want to use jQuery's next() function. So your code would look like this:

$('.video-holder').hide();
$('.show-video').click(function () { 
     $(this).next('.video-holder').toggle('slow');
     /* 'this' contains the javascript object where the click occurred. 
         We wrap it in a jQuery object and then execute our functions on it */
});