Question

I have this jquery code:

<script type="text/javascript">

    jQuery(document).ready(function($){  
        // hides the slickbox as soon as the DOM is ready
        $('#slickbox').hide();
        // shows the slickbox on clicking the noted link  
        $('#slick-show').click(function() {
            $('#slickbox').show('slow');
            return false;
        });
        // hides the slickbox on clicking the noted link  
        $('#slick-hide').click(function() {
            $('#slickbox').hide('fast');
            return false;
        });
        // toggles the slickbox on clicking the noted link  
        $('#slick-toggle').click(function() {
            $('#slickbox').toggle(400);
            return false;
        });
    });
    </script>

The problem is: how can I make the code work for multiple instances of the same divs?

Like this it works for the divs from the first for loop.

UPDATE: used classes, now all the divs are toggled at once. What I need is for example if I click on the third link generated by the loop, only the 3rd slickbox to be shown. Hope you understand.

<?       for ($i = 1; $i <= get_option('category_nr'); $i++): 

         <table class="form-table">
            <tr valign="top">
                <td colspan="2"><a href="#" class="slick-toggle<? echo $i; ?>">Toggle the box</a></td>
            </tr>
        </table>

        <div class="slickbox<? echo $i; ?>">
                Content
        </div>

<?      endfor; ?>

Thank you!

Answer 1

EDIT:

Every link toggles one div now.
The id of the link must be the same as the class of the div.

The code is untested:

HTML:

<a href="#" class="toggle_link" id="toggle_1">link 1</a>
<div class="toggle_1">Box 1</div>

<a href="#" class="toggle_link" id="toggle_2">link 2</a>
<div class="toggle_2">Box 2</div>

jQuery:

$('a.toggle_link').click(function(e) {
  e.preventDefault();
  $('.'+$(this).attr('id')).toggle();
});