Question

Im creating several grids with data using this code:

@foreach(var set in viewModelEnvironment.SystemEnvironmentVariabelSets) 
{
    <p class="slide"><a href="#" class="btn-slide">@set.Name</a></p>

         <div id="panelToHide">

        //Creating the grids for each set here...

        </div>
}

This creates a bunch of hidden “panels” with attached buttons. When clicking on one of these buttons I want the corresponding panel to expand. This is working if just one panel exxits by using this code:

     $(".btn-slide").click(function () {
        $("#panelToHide").slideToggle("slow");
        $(this).toggleClass("active"); return false;
    });

How can I use .click function on each unique panel and button that is created in the for-loop? How can i give each element in the for-loop a unique identifier and change the jquery function .click to correspond to each element individually?

Thanks

Answer 1

$("a.btn-slide").each(function(idx,el){
    $(this).click(function(){
        $('div.panel:eq('+idx+')').slideToggle('slow');
        /*...*/
    });
});

this will work as long as the buttons and the panels are in the same serial order and the number of panels is the same as the number of buttons, like this:

<a class="btn-slide">open first panel</a>
<a class="btn-slide">open second panel</a>
<a class="btn-slide">open third panel</a>

<div class="panel">this is the first panel</div>
<div class="panel">this is the second panel</div>
<div class="panel">this is the third panel</div>