jquery slideToggle() not “sliding” in but out

Question

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...

Answer 1

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/

Answer 2

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/

Answer 3

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.