Read more

How about an animated read more toggle?

WIP: http://codepen.io/BitsPls/pen/bwKjBQ?editors=1100

[Link2Twenty]

I'd probably do something like this:
https://jsfiddle.net/link2twenty/mdx7x37r/

There are a couple of problems though

1. If the original text is smaller than the fixed max-height then the button will still show but do nothing (other than changing the label)
2. Without knowing the size it is changing too before hand it's impossible to animate it, meaning you can animate it getting smaller but not getting larger.

I love the way you made it look/work! 👍 Also, good points, i guess those are the limitations of css. 😐 I discussed this website with some community members and one of them remarked that most of these methods either use a "hack", aren't supported well or depend on the DOM content. Ofcourse I pointed out that there is a statement about browser support and testing it before using it in production at the top of the website and I still think its a cool showcase of the possibilities of css.

[una]

Is this much different than the accordion?

[Link2Twenty]

@una not really, it's the same concept but using checkboxes rather than radio buttons (to have multiple open), it does show how you can change label text based on check state, however. Which might be nice to include in an example somewhere (even if it's just part of accordion or something).

[marsjaninzmarsa]

Without knowing the size it is changing too before hand it's impossible to animate it, meaning you can animate it getting smaller but not getting larger.

You can animate max-height to some big value. And toggle overflow to auto for edge-cases.