Question

I’m trying to use the slideToggle effect from jQuery. I want to use for a Show more button. I have a div with a lot of text, the first 300 characters are on the div directly, the rest is on a span tag inside the div with display: none. I want it to change into display: inline then the slideToggle is triggered, but what it does is change it to display: block. Right now I’ve got it on the callbackfunction ot change it to display: inline, but then the effect looks ugly because it first shows the span with display: block and then changes to display: inline :(. Is there any workaround to make this look good? I’ve looked at a lot of sites, and found nothing… Thanks 🙂

Answer 1

That is because you’re not initially hiding with .slideToggle(), but rather setting :hidden in the CSS, which is causing .slideToggle() to fall back to CSS-standard (display: block).

If you would call the element as display:inline and then .slideToggle() it hidden on initial load, .slideToggle() stores the inline-state