Hello,

I am in the process of creating a jquery effect that resembles the one at:  http://jsfiddle.net/zA23k/215/

As you can see, the user is able to click on 'more'/'less' buttons to show part or the entire line of text.

I'd like to create something similar but with a few key differences.

First, the initial state will be like this:

State 1:

Lorem ipsum dolor sit amet....

(Show more button here)

State 2:

Lorem ipsum dolor sit amet, 

consectetur adipiscing elit. 

Nam at ipsum eleifend, eui

smod nunc viverra, lobort

(Show less)

As you notice the text is shown/hidden vertically, with a slide-up/slide-down effect ( with text fading ).

Can anyone provide me with advice on how to achieve this effect? ( for both mobile and desktop )

Thank you

PS: State 1 shows a teaser text and State 2 shows the full text