list-show-more v1.0.0
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
}
8 years ago