<div id='result1' class='topdiv'>
title1
<ul id="resultList1" style="float:left"></ul>
</div>
<div id='result2' class='topdiv'>
title2
<ul id="resultList2" style=""></ul>
</div>
<div id='result3' class='topdiv'>
title3
<ul id="resultList3" style=""></ul>
</div>
max heigth of the elements result1 and result2 130px.
max elements showed in the lists(resultList1, etc...) is 8. if more make it scrollable.
onload the first elements loads in resultList1
if one element in the resultList1 list is selected then it loads it's sub info if they exists in resultList2 or else resultList2 stays hidden.
and if the sub info is selected the result1 div is collapsed (it calls animateUp(.selected element)) showing only the selected element in resultList1.
if the selected element in resultList1 is equal to the selected element in resultList2 the result1 div is hidden.
and so on for the result3 div
function animateUp(elem) {
var targetOffset = $(this).attr('offset');
var destinationOffset = $(elem).parent().parent().parent().offset().top;
var animHeight = targetOffset - destinationOffset;
$(elem).siblings().slideUp(100, 'swing');
$(elem).animate({top:0
}, 100, 'swing');
$(elem).parent().animate({
top:0
}, 300, 'swing');
$(elem).parents('.jScrollPaneContainer').animate({
height: 24
}, 300, 'swing');
$(elem).parents('.topdiv').animate({
height: 42
}, 300, 'swing');
$(elem).parents('.jScrollPaneContainer').find('.jScrollPaneTrack').hide();
if ($('.toplevel .jScrollPaneContainer ul li').length === 1)
{
$(this).parent()
}
}
function animateDown(elems) {
theParent = $(elems).siblings();
if (theParent.length > 8)
{
$this=($(elems));
offset = $this.attr('offset');
var totalElemensHeight = (theParent.length + 1) * 20;
var totalElements = theParent.length + 2;
whichPosition = $('li').index($(elems));
$(elems).parents('. topdiv').animate({height: 150},300,'swing');
$(elems).parent().parent().animate({height: 130},300,'swing');
$(elems).parent().parent().find('.jScrollPaneTrack').animate({height: 130},300,'swing');
if (offset > (totalElemensHeight-130))
{
newOffset = totalElemensHeight - 130;
$(elems).parent().animate({top: -newOffset},300,'swing');
scrollPos = $(elems).parents('.jScrollPaneContainer').find('.jScrollPaneDrag').height();
$(elems).parent().parent().find('.jScrollPaneDrag').animate({top:130-scrollPos
}, 300, 'swing');
$(elems).parents('.jScrollPaneContainer').find('.jScrollPaneTrack').show();
$(elems).siblings().slideDown(100, 'swing');
}
else
{
$(elems).parent().animate({top: -offset},300,'swing');
scrollPos = (130 / totalElements) * whichPosition;
$(elems).parent().parent().find('.jScrollPaneDrag').animate({top: 0 }, 300, 'swing').animate({top:scrollPos
}, 300, 'swing');
$(elems).parents('.jScrollPaneContainer').find('.jScrollPaneTrack').show();
$(elems).siblings().slideDown(100, 'swing');
}
}
else if (theParent.length <= 8)
{
var totalElemensHeight = ((theParent.length + 1) * 18);
$(elems).parent().parent().animate({ height: totalElemensHeight }, 300, 'swing');
$(elems).siblings().slideDown(100, 'swing');
var containerHeigth = (totalElemensHeight+20);
$(elems).parents('. topdiv').animate({ height: containerHeigth }, 300, 'swing');
$(elems).parent().parent().find('.jScrollPaneTrack').animate({height: totalElemensHeight},300,'swing');
}
}
when you select an item in either of collapsed lists it reopens its parent div closing the others (only showing selected items under the title, or just the title if none selected)
Can anyone give some suggestions how to do this in an efficient way?
Thanks