CODEWITHSUNDEEP
jqueryslidetoggle
ggzone
ggzone

Reputation: 3711

jquery slideToggle() not "sliding" in but out

Heres the code:

$('span.faqanswer').hide();
$('strong.faqlink').css('cursor','pointer').click(function(){
    $(this).parent().find('span.faqanswer').slideToggle();
});

If you click the span.faqlink it just toggles but not slidetoggles. if you click again it slidetoggles. this happens in any process. the downslide just toggles and the upslide slidetoggles...

Upvotes: 2

Views: 6511

Answers (3)

bvulaj
bvulaj

Reputation: 5133

If you're trying to have an element slide in horizontally, don't use slideToggle(). Use animate().

http://api.jquery.com/slideToggle/

The .slideToggle() method animates the height of the matched elements. This causes lower parts of the page to slide up or down, appearing to reveal or conceal the items.

Otherwise, do as @ShankarSangoli says and wrap the in-line element.

Upvotes: 0

ShankarSangoli
ShankarSangoli

Reputation: 69915

jQuery's animation relies upon the element having height and width. Since span is an inline element, it does not have these dimensions set or settable, so animations won't work.

It works while sliding up because the display is set to inline-block and it can be animated.

I would suggest you to wrap the span in a div and then slide the div instead if it is possible to change your markup.

Working demo - http://jsfiddle.net/ShankarSangoli/yTeAY/

Upvotes: 7

arunes
arunes

Reputation: 3524

Try $('span.faqanswer').slideUp(); instead of $('span.faqanswer').hide(); first.

http://jsfiddle.net/RbpAq/

Or give a style to span.faqanswer element display:none first and remove $('span.faqanswer').hide();

http://jsfiddle.net/tFFX6/1/

Upvotes: 0

Related Questions