Toggle

Toggle single

Toggle me!

Toggle group

<!-- typography.blade.php  -->
<h4 id="62bec63fa8ee5" class="c-typography c-typography__variant--subtitle" data-uid="62bec63fa8edf">
    Toggle single
</h4>
        <div class="u-margin__bottom--5" style="text-align: center;">
            <a id="62bec63fa8fa0" class="c-button c-button__filled c-button__filled--default c-button--md" href="#btn-3" target="_top" data-js-toggle-trigger="example" type="button" data-uid="62bec63fa8f9b">   
    <span class="c-button__label">
        
        
        
    </span>
</a>
            <div class="u-rounded" data-js-toggle-item="example" data-js-toggle-class="u-color__bg--primary">
                <!-- typography.blade.php  -->
<h4 id="62bec63fa8fed" class="c-typography u-color__text--primary u-margin__top--2 c-typography__variant--subtitle" data-uid="62bec63fa8fea">
    Toggle me!
</h4>            </div>
        </div>

        <!-- typography.blade.php  -->
<h4 id="62bec63fa9026" class="c-typography c-typography__variant--subtitle" data-uid="62bec63fa9023">
    Toggle group
</h4>
        <div id="62bec63fa94db" class="c-buttongroup u-margin__bottom--3 c-buttongroup__border--default"  data-uid="62bec63fa94d7">
    <button id="62bec63fa9072" class="c-button c-button__filled c-button__filled--default c-button--md c-button__toggle" href="" target="_top" data-js-toggle-trigger="iddd" data-js-toggle-group="example2" js-toggle-trigger="62bec63fa90607.75856267" js-toggle-item="62bec63fa90607.75856267" type="basic" aria-pressed="false" data-uid="62bec63fa906c">   
    <span class="c-button__label">
        
                    <span class="c-button__label-icon ">
                <!-- icon.blade.php -->
    <i id="62bec63fa910a" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="62bec63fa9106">
                    code
            </i>
            </span>
        
                    <span class="c-button__label-text ">
                Box One
            </span>
        
    </span>
</button>            <button id="62bec63fa9163" class="c-button c-button__filled c-button__filled--default c-button--md c-button__toggle" href="" target="_top" data-js-toggle-trigger="iddd2" data-js-toggle-group="example2" js-toggle-trigger="62bec63fa91544.45212061" js-toggle-item="62bec63fa91544.45212061" type="basic" aria-pressed="false" data-uid="62bec63fa915e">   
    <span class="c-button__label">
        
                    <span class="c-button__label-icon ">
                <!-- icon.blade.php -->
    <i id="62bec63fa91a0" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="62bec63fa919d">
                    code
            </i>
            </span>
        
                    <span class="c-button__label-text ">
                Box Two
            </span>
        
    </span>
</button>
    </div>

        <div class="u-color__bg--default u-rounded">
            <div class="u-rounded u-padding--2" data-js-toggle-item="iddd" data-js-toggle-class="u-color__bg--secondary" data-js-toggle-group="example2">
            </div>

            <div class="u-rounded u-padding--2" data-js-toggle-item="iddd2" data-js-toggle-class="u-color__bg--secondary" data-js-toggle-group="example2">
            </div>
        </div>

Attributes

The sort script handles toggling of classes. You choose to either toggle everything inside js-toggle-multi container or by adding js-toggle-single to any element. The data attribute value is the class that you toggle.

Blade component parameters

Attributes Description Values
data-js-toggle-container Outer container
data-js-toggle-single A single element to toggle class
data-js-toggle-multi A container where every child is toggled class
data-js-toggle-trigger An element with a click event attached to toggle