Expandable DIV with toggle link
Shows basics of creating an expandable/collapsible div using a hyperlink as the toggle switch. Link text switches based on state.
HTML
<p class="stack-trace">
Fiddle Meta
</p>
<p class="expand-one">
Stack trace <a href="#" class="toggleLink">(more ...)</a>
</p>
CSS
.stack-trace
{
display: none;
width: 800px;
}
JavaScript
$('.expand-one').click(function(){
var toggleText = $('.toggleLink').html();
var newVal;
if (toggleText == '(more ...)')
{
newVal = '(... less)';
}
else
{
newVal = '(more ...)';
}
$('.toggleLink').html(newVal);
$('.stack-trace').slideToggle('slow');
});