Responsively crop copy, then restore on-click via sliding drop-down animation in an accessible manner
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

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.


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...

Include a link to the script:

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


  • 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.


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