show/hide effect with jquery on vertical text

show/hide effect with jquery on vertical text


I am in the process of creating a jquery effect that resembles the one at:

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