Sliding & hiding multiple panels in jQuery.
- by lloydphillips
I have a table with multiple rows in each row is a select list and based on the selection (when the onchange event is fired) panels appear containing additional data below the row.I currently have code like this:
var allPnls = '.inv-dtl-comnts-add,.inv-dtl-comnts-update';
$(document).ready(function(){
hideAll();
//select action change
$(".inv-dtl-ddlaction").change(onSelectChange);
$(".btn-cancel").click(function(event){
slideAll();
$(".inv-dtl-ddlaction").val('[Select an Action]');
return false;
});
});
function onSelectChange(event){
//find out which select item was clicked
switch($(this).val())
{
case 'View/Add Comment':
$(this).closest(".row").children(allPnls).slideUp("fast",
function(){
$(this).closest(".row").children(".inv-dtl-comnts-add").slideToggle("fast");
});
break;
case 'Change Status':
$(this).closest(".row").children(allPnls).slideUp("fast",
function(){
$(this).closest(".row").children(".inv-dtl-comnts-update").slideToggle("fast");
});
break;
default:
//code to be executed if n is different from case 1 and 2
}
}
function hideAll(){
$(allPnls).hide();
}
function slideAll(){
$(allPnls).slideUp("fast");
}
So I'm hiding all the panels when the page loads and if a panel is already open I want to slide it shut before reopening the new panel. This works with the postback. With just one panel in the selection it worked great but with two panels the sliding up happens twice (it seems to slide down unopened panels before sliding them back up again). How can I adjust this so that I can get all panels listed in the variable allPnls to slide shut ONLY if they are already open? Is there a better way of sliding the panels shut and then having a callback to have the slideToggle work?
Lloyd
