Responsively crop copy, restore onclick via sliding drop-down animation
Responsively crop content copy down to a user-defined number of lines.
Click to fully restore the content via a sliding drop-down animation.
All delivered in an accessible manner.
If you’ve seen our recent TV ad, you’ll be in on our Food Love Story about ‘David’s’ shameful secret: when he met his wife, he fibbed about sharing her love of spicy food. 15 years later, he hasn’t come clean, but he’s still making his wife her favourite
curry – with a sneaky dollop of cooling yogurt for him.
Two line crop example
Sometimes it’s the undemandingly easy, everyday recipes that deliver the most joy. For ‘Iain’ and his dad, from our Food Love Story, it’s croque monsieur. They first had it on a joint trip to France and, since then, it’s become their favourite weekend
lunch. ‘Iain’s’ made a few changes to it along the way (bonjour, wafer-thin roast turkey) – but for him and his dad, it’s most definitely ‘proper’.
Features
User-defined number of lines initially displayed, defined in the HTML.
JavaScript automagically writes an accurate inline max-height property which is animated via CSS.
Resizing the viewport recalculates the length of text displayed and adjusts the max-height values.
Utilises ARIA roles and live region to help meet WCAG 2 (accessibility).
Vanilla JavaScript and less than 2kB minified & gzipped.