CODEWITHSUNDEEP
phpjquery
Draven
Draven

Reputation: 1467

Expanding / Collapsing divs

I have multiple expanding / collapsing boxes on a single page being generated by PHP / MySQL.

Problem is, when I click on one link to expand a box, it expands all the boxes.

I thought about appending the post ID at the end of the class (<div class="postreplycontainer-POST_ID">) but I am not sure if that will work since I'd have to figure out a way to change the jQuery.

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

Keep in mind, I can't manually code in each box because I am pulling the content from the database.

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

I want to focus the textarea box when I expand the <div>. I tried using the same trick as before (using .closest but that didn't work).

Here's the example: http://jsfiddle.net/Draven/kUhkP/53/

This example will always focus the first <textarea>.

Upvotes: 6

Views: 2446

Answers (3)

Amit Kumar Sharma
Amit Kumar Sharma

Reputation: 262

I think this should be ok for your problem.

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

Upvotes: 0

Vond Ritz
Vond Ritz

Reputation: 2012

Here's the FIDDLE

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

Upvotes: 9

jcubic
jcubic

Reputation: 66490

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

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

to slide that div http://jsfiddle.net/kUhkP/39/

Upvotes: 0

Related Questions