Geek Answers Handbook

Using jQuery slideToggle () without display: no?

I am trying to use the jQuery slideToggle function to show or hide a panel that was hidden using a CSS position rather than showing: none (since this causes problems with Google Map in one of my panels).

For the moment, I'm just hiding and showing the panels like this, but the animation will be enjoyable:

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

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

Any ideas?

+5
source share
3 answers

slideToggle , , . , CSS / . , animate. -

:

  • ( jquery hide())

  • (.. )

  • slideDown

:

  • slideUp - 2 3

  • (.. )

  • ( jquery show())

. (, "" CSS, ):

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();
     });
   }
}
+10

slideToggle() toggle(), / .

, .

, , , :

$(this).next('.panel').slideToggle();
+2

Pezholio

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

slideUP, slideDown, slideToggle,

HTML

<p class="text">
    test one<br />
    test one<br />
    test one<br />
    test one<br />
    test one<br />

</p>
<span class="more">show</span>​

Javascript

$(document).ready(function() {
    $('span.more').click(function() {
        $('p:eq(0)').slideToggle();
        $(this).hide();
    });
});​

CSS

.text{display:none}

http://jsfiddle.net/gB6np/

0

More articles:


All Articles