Okay, so you’ve got two options here :
- Use jQuery UI’s accordion – its nice, easy and fast. See more info here
- Or, if you still wanna do this by yourself, you could remove the
fieldset
(its not semantically right to use it for this anyway) and create a structure by yourself.
Here’s how you do that. Create a HTML structure like this :
<div class="container">
<div class="header"><span>Expand</span>
</div>
<div class="content">
<ul>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
</ul>
</div>
</div>
With this CSS: (This is to hide the .content
stuff when the page loads.
.container .content {
display: none;
padding : 5px;
}
Then, using jQuery, write a click
event for the header.
$(".header").click(function () {
$header = $(this);
//getting the next element
$content = $header.next();
//open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
$content.slideToggle(500, function () {
//execute this after slideToggle is done
//change text of header based on visibility of content div
$header.text(function () {
//change text based on condition
return $content.is(":visible") ? "Collapse" : "Expand";
});
});
});
Here’s a demo : http://jsfiddle.net/hungerpain/eK8X5/7/