Compress
Uses the display method.
1
2
3
4
5
6
7
...
Using the class method
Allow toggle
1
2
3
4
5
6
7
...Toggle
<h2>Uses the display method.</h2>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span data-js-compressed="3">...</span>
</div>
<h2>Using the class method</h2>
<div class="c-tags" id="673ed2870a61a" data-uid="673ed2870a61a">
<span class="c-tags__tag ">
1
</span>
<span class="c-tags__tag ">
2
</span>
<span class="c-tags__tag ">
3
</span>
<span class="c-tags__tag is-hidden">
4
</span>
<span class="c-tags__tag is-hidden">
5
</span>
<span class="c-tags__tag is-hidden">
6
</span>
<span class="c-tags__tag is-hidden">
7
</span>
<span class="c-tags__tag c-tags__tag-more" data-js-compressed="3" data-js-compressed-class="is-hidden">
...(4)
</span>
</div>
<h2>Allow toggle</h2>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span data-js-compressed="3" data-js-compressed-toggle>...Toggle</span>
</div>Attributes
The compress script removes/adds classes or sets display none on sibling elements.
Blade component parameters
| Attributes | Description | Values |
| data-js-compressed | Compresses sibling elements (using classes or display styling). |
number |
| data-js-compressed-class | A class name to be added/removed |
class |
| data-js-compressed-toggle | Add the attribute to allow toggling of the items. |