Using show/hide with multiple results.. one at a time

[SF23103]

I have a script that runs a MySQL query and loops through a bunch of results.

 

For each person's name, I have a short bio that I want to show/hide by clicking on the person's name.  I have a basic start, but I can't figure out how to show/hide them individually. When I click on someone's name, it shows/hides all of the bio's.  I do have an individual ID for each person, and could use that somehow, but I'm scratching my head trying to figure out how to accomplish that.  Any ideas?

 

http://jsfiddle.net/APA2S/3644/

 

[mac_gyver]

you need to use the this selector to reference the current element (to avoid having to manage id's for everything.)

 

there's probably a better way of doing this, but here's one way -

 

<div class="showmenu">Bob Smith
    <div class="menu" style="display: none;">Biography information goes here for bob Smith.</div>
</div>


<div class="showmenu">Jane Doe
    <div class="menu" style="display: none;">Biography information goes here for Jane Doe.</div>
</div>

    $(document).ready(function() {
        $('.showmenu').click(function() {
                $('.menu',this).toggle("slide");
        });
    });

note: id's need to be unique, so i used a class for your showmenu.

[SF23103]

Worked like a charm, thanks!!  And yes, that was my bad with the ID instead of class ;-)