Compress

Uses the display method.

1 2 3 4 5 6 7 ...

Using the class method

1 2 3 ...(4)

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="6605d6412d4ce" data-uid="6605d6412d4ce">
                                    <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.