list-show-more

js to limit lists and add show more button (simple popup)

Installation

npm install list-show-more --save

Markup Requirements

The button with the attributes and class .show-more-button must be positioned two levels down the main container. The items must either be of type with the class item. (See markup example 1) Or of type div, with parent element with .row class and parent of this with .section class. (See markup example 2)

data-more-text: define the text to show when hiding some elements. data-less-text: define the text to show when showing all elements. data-more-items: define the number of items to show when hiding some elements. data-more-num: if "1", adds the number of remaining list items to the button text.

Markup Example 1

<div>
	<h2>Flere nyheder</h2>
    <ol>
        <li class="item">
		...
        </li>
        <li class="item">
		...
        </li>
    </ol>
    <div>
        <a class="show-more-button" data-more-items="3" data-more-num="1" data-more-text="Show more" data-less-text="Hide">Show..</a>
    </div>
</div>

Markup Example 2

<div class="section">
	<h2>Flere nyheder</h2>
    <div class="row">
        <div>
		...
        </div>
        <div>
		...
        </div>
    </div>
    <div>
        <a class="show-more-button" data-more-items="10" data-more-num="0" data-more-text="Show more" data-less-text="Hide">Show..</a>
    </div>
</div>

Styling

The component makes use of the .hidden class (This is not included!) which in terms of styling should add:

.hidden {
   display: none !important;
}

The following CSS can be used for styling the button.

// Show more button, used for lists and teasers.
a.show-more-button {
  display: block;
  text-align: center;
  text-transform: uppercase;
  font-family: "gibsonRegular", "Arial", sans-serif;
  font-size: 16px;
  border-radius: 2px;
  line-height: 30px;
  color: white;
  background-color: black;
  cursor: pointer;
  margin-bottom: 10px;
  @media (min-width: 768px) {
    margin-bottom: 20px;
  }
  .boxed & {
    margin-top: 10px;
    margin-bottom: 0;
    @media (min-width: 768px) {
      margin-top: 20px;
    }
  }
}

Usage Example

if (document.querySelector(".show-more-button") !== null) {
  require('list-show-more'); // Require component
}