"Read More" mode by changing default CSS values

[roenfeldt]

@phegman Is there any easy way of implementing VShowSlide so that it can function as a "Read More" button? In a nutshell:

1. Upon initialization, the "hidden" text block would be partially visible, as in, a specific height of it, expressed in rem units, e.g. 5 for three visible lines of text.
2. Clicking the Read More (expand) button, would expand the whole text.
3. A second click event on the button would revert the state of the content, basically by collapsing the text and bringing the button back to its original Y location, while of course leaving only the initial 3 text lines visible.

I noticed that, by manually changing the initial height of the collapsible text element from 0px to a specific rem value, in my case 5, and turning its CSS visibility property to visible, I got the desired effect, albeit obviously a non-functional one.

To sum it all up, is there any way of modifying the plugin's default CSS declarations that it would otherwise apply, by default, to the collapsible element? I'm attaching a screenshot which illustrates what I'm trying to achieve. I'm hoping I'm making sense, otherwise let me know and I'll do my best to explain what I'm looking for, in a better way.

Thanks a lot!

[phegman]

@roenfeldt Not out of the box right now. This directive was meant to work like v-show but in a sliding motion. So it currently only shows/hides. It doesn't support partial show/hide.

That said I am open to adding an option to do what you are trying to do. Don't have much time to work on this right now but happy to review any PRs if you would like to submit one