Question

I’m trying to use jQuery’s slideToggle function to show or hide a panel which has been hidden using CSS position, rather than display:none (as this causes issues with a Google Map in one of my panels).

At the moment I’m just hiding and showing the panels like so, but some animation would be nice:

$('.panel').addClass('hidden');
$('.head > span').addClass('closed');

$('.head').click(function() { 
    $(this).next('.panel').toggleClass('hidden');
    $(this).children('span').toggleClass('open');
});

Any ideas?

Answer 1

slideToggle animates height of the element in question apart from visibility. Not sure how exactly you have used CSS position to show/hide your panels. Based on that you have to build you own animation using animate function. Another quick way could be to

For showing element:

1. Hide the element (using jquery hide())

2. Apply your class to show element
   (i.e. to adjust its position)

3. Now apply slideDown

For hiding content:

1. Apply slideUp – use callback function to do steps 2 & 3

2. Apply your class to hide element
   (i.e. to adjust its position outside window)

3. Show the element (using jquery show())

Edit: Illustrative code goes below (assuming that ‘hidden’ classes will do CSS positioning to hide the element):

function customSlideToggle(e)
{
   var show = e.hasClass('hidden');
   if (show) {
     e.hide();
     e.removeClass('hidden')
     e.slideDown('slow');
   }
   else
   {
     e.slideUp('slow', function() {
        e.addclass('hidden');
        e.show();
     });
   }
}