Expand / collapse divs

Question

I have several expand / collapse fields on one page generated by PHP / MySQL.

The problem is that when I click on one link to expand the box, it expands all the fields.

I was thinking about adding a message id at the end of the class ( <div class="postreplycontainer-POST_ID"> ), but I'm not sure if this will work, since I need to figure out a way to change jQuery.

Here is a working example: http://jsfiddle.net/Draven/kUhkP/35/

Keep in mind that I cannot manually enter code in each field because I am retrieving content from the database.

EDIT: Maybe someone can help me with an additional problem.

I want to focus the textarea field when I expand the <div> . I tried using the same trick as before (using .closest , but this did not work).

Here is an example: http://jsfiddle.net/Draven/kUhkP/53/

This example will always focus on the first <textarea> .

Answer 1

Here is fiddle

 $("a.postreply").click(function () { $(this).closest('.blog-container') .find('.postreplycontainer').slideToggle("fast"); }); 

Answer 2

If you call $("div.postreplycontainer") , you will get access to all divs, if the div is always after the table, you can use

 $("a.postreply").click(function() { $(this).parents('table').next().slideToggle("fast"); }); 

to offset this div http://jsfiddle.net/kUhkP/39/

Answer 3

I think this should be good for your problem.

 $("a.postreply").click(function () { $(this).closest('.blog-table').next().slideToggle("fast"); });