[jQuery] Re: Help on Independent DIV's that toggle!!

Here is my solution:

The HTML structure of each DIV:

<div class="article">
<p>
Basic content
</p>
<p class="details">
Additional content
</p>
</div>

The JS code:

// the clickable "more details" SPAN element (as a string)
var $showMore = " <span class='showMore'>More Details</span>";

// the function that hides the second P, and adds the SPAN to the
first P
function hideDetails(div) {
$(div)
.find("p:first").append($showMore)
.end().find(".details").hide();
}

$(document).ready(function() {

// do the initialization for every DIV with class ".articles"
$(".article").each(function() { hideDetails(this); });

// attach a live click event handler to every "more details" SPAN
element
$(".showMore").live("click", function() {
$(this).closest(".article").find(".details").slideToggle(400);
$(this).text($(this).text() == 'More Details' ? 'Close' :
'More Details');
});

});

Because the handler was attached to an live event, you can now
dynamically create DIVs, for example:

$("<div class='article'></div>")
.append("<p>Another basic content<p>")
.append("<p class='details'>Another additional content</p>")
.appendTo("body")
.each(function() { hideDetails(this); });

This solution works in the way that if JS is turned off, the second P
will be visible, and there will be no "More details" SPAN.