Sliding & hiding multiple panels in jQuery.

Question

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

Answer 1

You can shut only visible or open panels by adding the :visible in the selector as below:

var allPnls = '.inv-dtl-comnts-add:visible,.inv-dtl-comnts-update:visible';

I'm not sure if this would fix your problem though. Maybe if you provide a sample page representing this problem, I could help.