<commit_before>#Responsively crop copy, restore onclick via sliding drop-down animation


Responsively crop content copy down to a user-defined number of lines in an accessible manner.

Click to fully restore content via a sliding drop-down animation.

As used on Tesco's <a href="http://www.tesco.com/food-love-stories/">Food Love Stories</a>.

Vanilla JavaScript, small script <2kB minified and gzipped. Support down to IE9.

I believe <abbr title="Web Content Accessibility Guidelines">WCAG</abbr> 2 level AA accessible but as yet unconfirmed.

<strong>CodePen demo: <a href="http://codepen.io/2kool2/pen/PWmzMa">Responsively crop copy, restore onclick via sliding drop-down animation</a></strong>


<br>
##Basic usage

Incude a link to the styles:

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

Add content block(s) and data attribute.

The attribute value is equal to the number of lines to display.

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

Include a link to the script:

```html
<script src="js/cropCopyRestore.2.0.min.js"></script>
```

<br>
##Status

In cross-browser / platform testing.

Accessibility testing to follow.

CodePen demo: <a href="https://codepen.io/2kool2/pen/PWmzMa">Responsively crop copy, restore onclick via sliding drop-down animation</a>

GitHub repo: <a href="https://github.com/2kool2/crop-copy-slide-restore">crop-copy-slide-restore</a>


<hr><commit_msg>Text update<commit_after>#Responsively crop copy, restore onclick via sliding drop-down animation


Responsively crop content copy down to a user-defined number of lines in an accessible manner.

Click to fully restore content via a sliding drop-down animation.

As used on Tesco's <a href="http://www.tesco.com/food-love-stories/">Food Love Stories</a>.

Vanilla JavaScript, small script <2kB minified and gzipped. Support down to IE9.

I believe <abbr title="Web Content Accessibility Guidelines">WCAG</abbr> 2 level AA accessible but as yet unconfirmed.

<strong>CodePen demo: <a href="http://codepen.io/2kool2/pen/PWmzMa">Responsively crop copy, restore onclick via sliding drop-down animation</a></strong>


<br>
##Basic usage

Incude a link to the styles:

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

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

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

Include a link to the script:

```html
<script src="js/cropCopyRestore.2.0.min.js"></script>
```

<br>
##Status

In cross-browser / platform testing. Accessibility testing to follow.

CodePen demo: <a href="https://codepen.io/2kool2/pen/PWmzMa">Responsively crop copy, restore onclick via sliding drop-down animation</a>

GitHub repo: <a href="https://github.com/2kool2/crop-copy-slide-restore">crop-copy-slide-restore</a>


<hr>
{'fraction_non_alphanumeric': 0.12748457847840988, 'fraction_numerical': 0.00822481151473612, 'mean_word_length': 4.678988326848249, 'pattern_counts': {'":': 0, '<': 49, '<?xml version=': 0, '>': 47, 'https://': 4, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3765220', 'n_tokens_mistral': 977, 'n_tokens_neox': 938, 'n_words': 310}