I have the following code which nicely displays a list for me:
$(document).ready(function() {
$('dl> dd').hide();
//$('dl.menuleft> dd:gt(0)').hide(); use this if you want the first
one to stay opened
$('dl> dt').click(function() {
if($(this).find("a").attr("href")){}else{
var $nextDT = $(this).next();
var $visibleSiblings = $nextDT.siblings('dd:visible');
if ($visibleSiblings.length) {
$visibleSiblings.slideUp('normal', function() {
$nextDT.slideToggle('normal');
});
} else {
$nextDT.slideToggle('normal');
}
}
});
Within the lists are images and further menus which I'd like to use to
draw content from a db, and have further content slide out under just
the section that has been revealed. Each section has a unique id which
I can append (and I could also have an empty div with the same id
underneath), but what would be the best approach to have the content
of that div (grabbed from a db) revealed elegantly - but collapsed
again if another DT is selected? Ideas on a postcard appreciated!
