[Solved] Rudimentary animation – showing more content (sliding movement)

[Mag]

Hi, I’m really beginner in the subject :( Can anyone help me out here? http://jsfiddle.net/f8zqg/179/

What I’m trying to achieve is showing and hiding div with “lorem ipsum” content.

I’ve tried some things from: http://api.jquery.com/animate/ but to no avail.

Thanks!

[Paulie_D]

What precisely are you trying to do?

You may be trying to replicate an already existing widget functionality.

[Mag]

1. checking how much text came from cms – if detailDescription is higher than 40px then I’m showing “show more”.
2. clicking “show more” should slide detailDescription down – here’s my problem with function animate or slideDown
3. show more should change into “show less”
4. clicking on show less should slide detailDescription up and so on :)

[Paulie_D]

Hmmm…well there’s two different functions in there.

Sliding the div and changing the span text…not that you can’t chain them.

My JS/JQ skills are minimal but I’ll have a think.

[Mag]

And my problem is: I don’t know what I’m doing wrong but I can’t achieve smooth animation of detailDescription..

[Mag]

Yeah, changing text is the other problem ;)

[Paulie_D]

Animating to Auto is an issue so a plug-in may be required.

See the linked article and links within that.

https://css-tricks.com/css-animate-fromto-auto/

[Paulie_D]

As for swapping out the text see: http://api.jquery.com/html/

[Mag]

I used:
.append(“.showMoreText::after{ content:’show more’ }”)
to change text… But I don’t know if its the best js solution.. :(

Paulie_D – the thing is I didn’t want to use css transitions – cause I didn’t know the height of the div. I wonder why pure jquery didin’t work..

[Paulie_D]

append(“.showMoreText::after{ content:’show more’ }”)
to change text… But I don’t know if its the best js solution..

No, it’s probably not.

Jquery can grab the actual text and swap it out for other text…see the link I gave.

As for the animation, pure JQuery is just a large helping hand…it’s not set up to do everything out of the box, that’s why people make plug-ins (which is just more javascript) to help it along with specific functions.

[Mag]

Thanks for the help :)

[Author]

Posts