Crop copy then restore on-click

Responsively crop your 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.

Demo

CodePen: Responsively crop copy, restore onclick via sliding drop-down animation

As used on Tesco's Food Love Stories.

Basic usage

Include a link to the styles:

<link rel="stylesheet" href="css/styles.css">

Add content block(s) with data attribute (value = number of lines to display).

<div class="CCR">
  <div class="CCR_txt" data-cropCopyRestore="2">
    Content copy...
  </div>
</div>

Include a link to the script:

<script src="js/cropCopyRestore.2.1.min.js"></script>

Features

• User-defined number of lines initially displayed, defined in the HTML.
• JavaScript 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.
• Support down to IE9.

Status

Cross-browser tested:
Mac: Firefox Dev, Chrome, Safari, Opera Dev.
PC: Firefox Dev, Chrome, IE9 - Edge.

In Live testing.
To be followed by full accessibility testing.

GitHub repo: crop-copy-slide-restore GitHub Gist: Gist of crop-copy-slide-restore

---

Mike Foskett @ webSemantics