Question

49

Using jQuery slideToggle() without display:none?

rated 0 times [ 52] [ 3] / answers: 1 / hits: 17637 / 14 Years ago, mon, september 20, 2010, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

analiseg

Add To Favorites

Follow

Total Points: 460

Total Questions: 96

Total Answers: 90

Location: Ecuador

Member since Thu, Jun 4, 2020

4 Years ago

analiseg questions

1 how to mock a constructor being initiated from inside a method with jest

Tue, Oct 27, 20, 00:00, 4 Years ago

1 Subscribe to topic with Stomp Client but i don't get any notification don't work React Native and work on Angular

Wed, Apr 22, 20, 00:00, 4 Years ago

1 HTTP error 431 when trying to draw a base64 image to a canvas

Wed, Dec 11, 19, 00:00, 5 Years ago

1 Why ngTemplateOutlet is not working when I pass a variable/object?

Fri, Aug 9, 19, 00:00, 5 Years ago

1 Cannot read property 'length' of null - JavaScript

Thu, Jul 18, 19, 00:00, 5 Years ago

View All

answered 14 Years ago andreasn · Accepted Answer

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:

Hide the element (using jquery hide())

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

Now apply slideDown

For hiding content:

Apply slideUp - use callback function to do steps 2 & 3

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

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();

     });

   }

}