What about using something like an Accordion style UI element (
http://jqueryui.com/accordion/) ... could probably work relatively well for you.
To build something like this without the massive overhead of jQuery UI it would be relatively trivial, you just need to follow some basic markup and CSS
Firstly, we'll start with our markup.
HTML Code:
<!-- this is the element we'll apply CSS / scripting to -->
<div class="collapser">
<!-- The table headings can be a HTML heading element -->
<h3>Table heading</h3>
<!-- these headings are followed by a content area, we'll hide/show this content with JavaScript -->
<div class="content">
<!-- Any content can go here -->
</div>
<h3>Table heading</h3>
<div class="content">
<!-- Any content can go here -->
</div>
<!-- etc, add more headings/content -->
</div>
Now on to our relevant CSS, what we need is a little indicator next to the heading when it is active and when it is not to indicate the state.
Code css:
.collapser h3 {
position: relative;
}
.collapser h3::before {
content: " > ";
font-size:20px;
font-weight: bold;
position: absolute;
left:-20px;
top:0px;
}
.collapser h3.active::before {
content: " v ";
}
I've opted for a ">" and "v" to indicate the open and closed state, you could of course use a background image and create a "+" / "-" symbol (or whatever you fancy).
Ok, so finally, our JavaScript, it's going to be relatively short and sweet, we don't actually need this to do too much.
Code javascript:
$(document).ready(function(){
//firstly we'll collapse all the content areas so only the headings are visible
$(".collapser .content").hide();
//now we'll set a click handler on the headings so that we can show/hide the content as required
$(".collapser").on("click", "> h3", function(e) {
var el = $(this);
el.toggleClass("active"); //toggle the active class on the heading
el.next(".content").slideToggle(400); // find the next content element and toggle showing it depending on the current state.
});
});
There you have it, simplicity itself.
A full working example is on JS Fiddle:
http://jsfiddle.net/GeekyJohn/VKeS3/
Reply With Quote
Originally Posted by vwphillips
Bookmarks