Toggle

<!-- typography.blade.php   original: h4 -->
<h2 class="c-typography c-typography__variant--h2" data-uid="69f0cfeaba19c" data-component="typography">
    Toggle single
</h2>
        <div class="u-margin__bottom--5" style="text-align: center;">
                <a class="c-button c-button__filled c-button__filled--default c-button--md" data-js-toggle-trigger="example" href="#btn-3" target="_top" data-uid="69f0cfeaba22e" data-component="button">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
        
                    Toggle background color
        
        
        
    </span> </a>
            <div class="u-rounded" data-js-toggle-item="example" data-js-toggle-class="u-color__bg--primary">
                    <!-- typography.blade.php   original: h4 -->
<h3 class="c-typography u-color__text--primary u-margin__top--2 c-typography__variant--h3" data-uid="69f0cfeaba289" data-component="typography">
    Toggle me!
</h3>            </div>
        </div>

            <!-- typography.blade.php   original: h4 -->
<h4 class="c-typography c-typography__variant--h4" data-uid="69f0cfeaba2c8" data-component="typography">
    Toggle group
</h4>
            <button class="c-button c-button__filled c-button__filled--default c-button--md c-button__toggle" data-js-toggle-trigger="iddd" data-js-toggle-group="example2" aria-pressed="false" aria-label="Box One" data-uid="69f0cfeaba311" data-component="button">   
     <span class="c-button__label">         
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--code c-icon--material c-icon--material-code material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="code" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0cfeaba48b" data-component="icon">
                    </span>
            </span>
        
                    <span class="c-button__label-text ">
                Box One
            </span>
        
    </span> </button>            <button class="c-button c-button__filled c-button__filled--default c-button--md c-button__toggle" data-js-toggle-trigger="iddd2" data-js-toggle-group="example2" aria-pressed="false" aria-label="Box Two" data-uid="69f0cfeaba4f3" data-component="button">   
     <span class="c-button__label">         
        
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--code c-icon--material c-icon--material-code material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" data-material-symbol="code" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69f0cfeaba536" data-component="icon">
                    </span>
            </span>
        
                    <span class="c-button__label-text ">
                Box Two
            </span>
        
    </span> </button>
        <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>