Toggle

Toggle single

Toggle group

<!-- typography.blade.php  -->
<h4 id="61efa29ca00e7" class="c-typography c-typography__variant--subtitle" data-uid="61efa29ca00e1">
    Toggle single
</h4>
        <div class="u-margin__bottom--5" style="text-align: center;">
            <a id="61efa29ca016f4.10447286" class="c-button c-button__filled c-button__filled--default c-button--md ripple ripple--before" href="#btn-3" target="_top" js-toggle-trigger="example" type="button" data-uid="61efa29ca0181">   
    <span class="c-button__label">
    
        
                    Toggle background color
            
    </span>
</a>
            <div class="u-rounded" js-toggle-item="example" js-toggle-class="u-color__bg--primary">
                <!-- typography.blade.php  -->
<h4 id="61efa29ca01e3" class="c-typography u-color__text--primary u-margin__top--2 c-typography__variant--subtitle" data-uid="61efa29ca01e0">
    Toggle me!
</h4>            </div>
        </div>

        <!-- typography.blade.php  -->
<h4 id="61efa29ca022a" class="c-typography c-typography__variant--subtitle" data-uid="61efa29ca0228">
    Toggle group
</h4>
        <div id="61efa29ca0452" class="c-buttongroup u-margin__bottom--3 c-buttongroup__border--default"  data-uid="61efa29ca044f">
    <button id="61efa29ca02881.27479937" class="c-button c-button__filled c-button__filled--default c-button--md c-button__toggle ripple ripple--before" href="" target="_top" js-toggle-trigger="iddd" js-toggle-group="example2" type="basic" aria-pressed="false" data-uid="61efa29ca0299">   
    <span class="c-button__label">
    
                    <span class="c-button__label-text">
                Box One
            </span>

            <span class="c-button__label-icon">
                <!-- icon.blade.php -->
    <i id="61efa29ca0322" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="61efa29ca031d">
                    code
            </i>
            </span>
        
                    
            
    </span>
</button>            <button id="61efa29ca036e4.74417024" class="c-button c-button__filled c-button__filled--default c-button--md c-button__toggle ripple ripple--before" href="" target="_top" js-toggle-trigger="iddd2" js-toggle-group="example2" type="basic" aria-pressed="false" data-uid="61efa29ca037d">   
    <span class="c-button__label">
    
                    <span class="c-button__label-text">
                Box Two
            </span>

            <span class="c-button__label-icon">
                <!-- icon.blade.php -->
    <i id="61efa29ca03cb" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="61efa29ca03c7">
                    code
            </i>
            </span>
        
                    
            
    </span>
</button>
    </div>

        <div id="61efa29ca05cd" class="c-grid u-color__bg--default u-rounded u-padding c-grid__container c-grid__container__gap__col--0 c-grid__container__gap__row--0" style="grid-template-columns: repeat(12, minmax(auto, 1fr));" data-uid="61efa29ca059d">
    <div id="61efa29ca04f0" class="c-grid u-rounded u-padding--2 c-grid__column__start--1@xs c-grid__column__end--7@xs c-grid__column__start--1@sm c-grid__column__end--7@sm c-grid__column__start--1@md c-grid__column__end--7@md c-grid__column__start--1@lg c-grid__column__end--7@lg c-grid__column__start--1@xl c-grid__column__end--7@xl c-grid__row__start--1@xs c-grid__row__end--2@xs c-grid__row__start--1@sm c-grid__row__end--2@sm c-grid__row__start--1@md c-grid__row__end--2@md c-grid__row__start--1@lg c-grid__row__end--2@lg c-grid__row__start--1@xl c-grid__row__end--2@xl c-grid__container__gap__col--0 c-grid__container__gap__row--0" js-toggle-item="iddd" js-toggle-class="u-color__bg--secondary" js-toggle-group="example2" data-uid="61efa29ca04eb">
    
</div>
            <div id="61efa29ca0558" class="c-grid u-rounded u-padding--2 c-grid__column__start--7@xs c-grid__column__end--13@xs c-grid__column__start--7@sm c-grid__column__end--13@sm c-grid__column__start--7@md c-grid__column__end--13@md c-grid__column__start--7@lg c-grid__column__end--13@lg c-grid__column__start--7@xl c-grid__column__end--13@xl c-grid__row__start--1@xs c-grid__row__end--2@xs c-grid__row__start--1@sm c-grid__row__end--2@sm c-grid__row__start--1@md c-grid__row__end--2@md c-grid__row__start--1@lg c-grid__row__end--2@lg c-grid__row__start--1@xl c-grid__row__end--2@xl c-grid__container__gap__col--0 c-grid__container__gap__row--0" js-toggle-item="iddd2" js-toggle-class="u-color__bg--secondary" js-toggle-group="example2" data-uid="61efa29ca0554">
    
</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
js-toggle-container Outer container
js-toggle-single a single element to toggle class
js-toggle-multi a container where every child is toggled class
js-toggle-trigger an element with a click event attached to toggle