Question

I’m just starting to use jQuery and I’m having some trouble with something I can easily do in other languages.

I have a list of elements and each element contains a list of information.
My problem comes from the fact that I can’t use jQuery to slideDown or slideUp information about these elements because I can’t get a unique identifier for each one.

$(function()
{
    classe = "#afficheDetails" + 0;
    $(classe).click(function()
    {
        affiche = "#detailsFeuille" + 0;
        if($(affiche).css("display") == "block")
        {
            $(affiche).slideUp();
        }
        else 
        {
            $(affiche).slideDown();
        }
    });
});

update :

Also, I’m in a for loop, so I have not always the same number of elements to display…

<p id='afficheDetails<?php echo $i;?>'>to display info, click here</p>

            <table id='detailsFeuille<?php echo $i;?>'>
                <tr>
                    ...
                </tr>

                <tr>
                    ...
                </tr>
</table>

This kind of thing is actually working but as you can see I’m not adding the indice dynamically, it’s all manual. And my list of elem can contain a lot of elements.

I tried to create a not-anonymous function but every time I call it, I get an error : myFunction is not defined.

Could you help me?

Thx!

Answer 1

By index

// Select all elements that start with "afficheDetails"
$("[id^='afficheDetails']").click(function(){
    var index = $("[class^='afficheDetails'").index(this); // Index of the element
    $("[id^='detailsFeuille']").eq(index).slideToggle();
});

Check this demo: http://jsfiddle.net/fRyjV/1/

By ID

$("[id^='afficheDetails']").click(function(){
    // Replace the first part of the ID with nothing to get the integer.
    var id = this.id.replace("afficheDetails", "");
    $("#detailsFeuille" + id).slideToggle();
});

Check this demo http://jsfiddle.net/fRyjV/