help to reiterate through my jquery snippet

Code in question:

$("#alpha").clic开发者_如何学Gok(function(event) {
    event.preventDefault();
    $("#show").slideToggle();
});

I have a list of files and its being outputted with PHP in alphabetical. I use this method in PHP:

foreach(range('A','Z') as $i) {
    if (array_key_exists ("$i", $alpha)) {
        echo '<div id="alpha"><a href="#" name="'.$i.'"><h2>'.$i.'</h2></a></div><div id="show">';
        foreach ($$i as $key=>$value)
            echo '<p>'.$value.' '.$key.'</p>';
    }
    echo '</div>';
}

What I want to do is when the user clicks on the #alpha to toggle the div #show that has the names that belong to a letter up. I can do this with the first listing, but every listing after that isn't affected.

how can i tell jquery that foreach letter apply the js code so it can toggle up/down the #show.

I don't want to this 26 times (one time for each letter in the alphabet), I tried to use class instead of id but that causes all the #show to toggleup heh.

---

ID attributes must be unique. Use class attributes instead of IDs within your generated markup, and target the .show which is relative to the clicked .alpha:

$(".alpha").click(function(event) {
    event.preventDefault();
    $(this).next(".show").slideToggle();
});

---

id attribute should be unique per document. Try using class instead.

echo '<div class="alpha">...';

don't forget to update your javascript accordingly

$('.alpha').click(...

---

And if I may rewrite your PHP

foreach(range('A','Z') as $i) {
    if (array_key_exists ($i, $alpha)) { // don't need quotes around $i
        echo '<div class="alpha"><a href="#" name="'.$i.'"><h2>'.$i.'</h2></a></div><div id="show">';
        foreach ($$i as $key=>$value) {
            echo "<p>$value $key</p>"; // looks cleaner with double quotes
        }
    }
    echo '</div>';
}

Yeah, and h2 element is not allowed inside <a>