Question

So I have my grid based layout:

<div id="gridrow" class="clear">
<div id="gridsection" class="float-left">
    <div id="gridwrap">
        <div id="gridimage" class="clear"></div>
        <div id="gridtitle" class="clear">Title</div>
        <div id="gridinfo" class="clear">Info</div>
    </div>
</div>
<div id="gridsection" class="float-right">
    <div id="gridwrap">
        <div id="gridimage" class="clear"></div>
        <div id="gridtitle" class="clear">Title</div>
        <div id="gridinfo" class="clear">Info</div>
    </div>
</div>
<div id="gridsection" class="gridmiddle">
    <div id="gridwrap">
        <div id="gridimage" class="clear"></div>
        <div id="gridtitle" class="clear">Title</div>
        <div id="gridinfo" class="clear">Info</div>
    </div>
</div>

I then have this jQuery script:

$("#gridtitle").each(function(index){
    $("#gridtitle:eq("+index+")").click(function (){
        $("#gridimage:eq("+index+"), #gridinfo:eq("+index+")").slideToggle();
    });
});

I thought this would work (made logical sense) however, only the first grid element will work, any tips?

For more information please feel free to ask,

Thanks.

Answer 1

Different elements must have differend IDs.

If two or more elements have the same ID, only first is used.