Long Cat

JavaScript TBG

Show long content one or a few items at a time

Setup

Sometimes a list or other kinds of content runs too long on the page, and that’s where Long Cat comes in: give the too-long element an attribute of data-long-cat-hidden and wrap it around an element with the attribute data-long-cat.

Within the data-long-cat wrapper, add an empty element with the attribute data-long-cat-visible where the content will be revealed 10 items at a time (or a customized amount using the data-count attribute).

You can also specify the initial number of visible items with the data-initial-count attribute if it should differ from the default or data-count-specified number. None of the items will be visible initially if the value of data-initial-count is "0."

Finally, clicking an element with the data-long-cat-trigger attribute will reveal the content one after the other.

<div data-long-cat data-count="1">
  <ol data-long-cat-visible></ol>

  <ol data-long-cat-hidden>
    <li><img src="assets/img/long-cat/1.jpg" alt=""></li>
    <li><img src="assets/img/long-cat/2.jpg" alt=""></li>
    <li><img src="assets/img/long-cat/3.jpg" alt=""></li>
    <li><img src="assets/img/long-cat/4.jpg" alt=""></li>
    <li><img src="assets/img/long-cat/5.jpg" alt=""></li>
    <li><img src="assets/img/long-cat/6.jpg" alt=""></li>
    <li><img src="assets/img/long-cat/7.jpg" alt=""></li>
    <li><img src="assets/img/long-cat/8.jpg" alt=""></li>
    <li><img src="assets/img/long-cat/9.jpg" alt=""></li>
    <li><img src="assets/img/long-cat/10.jpg" alt=""></li>
  </ol>

  <button class="button" data-long-cat-trigger>Longer</button>
</div>

JavaScript Reference

Initializing

The file foundation.longCat.js must be included in your JavaScript to use this plugin, along with foundation.core.js.

Foundation.LongCat

Creates a new instance of a Long Cat

var elem = new Foundation.LongCat(element, options);

Name	Type	Description
`element`	jQuery	jQuery object to make into an Flickity Carousel.
`options`	Object	Overrides to the default plugin settings.

Plugin Options

Use these options to customize an instance of Long Cat. Plugin options can be set as individual data attributes, one combined data-options attribute, or as an object passed to the plugin's constructor. Learn more about how JavaScript plugins are initialized.

Name	Type	Default	Description
`data-count`	`number`	`10`	Number of hidden items to show at a time
`data-initial-count`	`number`	`null`	Number of hidden items to show initially

Methods

moreContent

$('#element').foundation('moreContent');

Add more visible content to the Long Cat element

destroy

$('#element').foundation('destroy');

Destroys the Long Cat and hides the element.