Toggle


Warning: Element "h2" and variant "subtitle" cannot be combined. Heading elements must use a heading variant. in /var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Component/Typography/Typography.php on line 52

Toggle single


Warning: Element "h3" and variant "subtitle" cannot be combined. Heading elements must use a heading variant. in /var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Component/Typography/Typography.php on line 52

Toggle me!


Warning: Element "h4" and variant "subtitle" cannot be combined. Heading elements must use a heading variant. in /var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Component/Typography/Typography.php on line 52

Toggle group

<br />
<b>Warning</b>:  Element "h2" and variant "subtitle" cannot be combined. Heading elements must use a heading variant. in <b>/var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Component/Typography/Typography.php</b> on line <b>52</b><br />
<!-- typography.blade.php   original: h4 -->
<h2 class="c-typography c-typography__variant--h2" data-uid="66057066f1d63">
    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" target="_top" data-js-toggle-trigger="example" type="button" href="#btn-3" data-uid="66057066f1e1f">   
     <span class="c-button__label">         
        
        
    </span> </a>
            <div class="u-rounded" data-js-toggle-item="example" data-js-toggle-class="u-color__bg--primary">
                    <br />
<b>Warning</b>:  Element "h3" and variant "subtitle" cannot be combined. Heading elements must use a heading variant. in <b>/var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Component/Typography/Typography.php</b> on line <b>52</b><br />
<!-- typography.blade.php   original: h4 -->
<h3 class="c-typography u-color__text--primary u-margin__top--2 c-typography__variant--h3" data-uid="66057066f1ee3">
    Toggle me!
</h3>            </div>
        </div>

            <br />
<b>Warning</b>:  Element "h4" and variant "subtitle" cannot be combined. Heading elements must use a heading variant. in <b>/var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Component/Typography/Typography.php</b> on line <b>52</b><br />
<!-- typography.blade.php   original: h4 -->
<h4 class="c-typography c-typography__variant--h4" data-uid="66057066f1f60">
    Toggle group
</h4>
            <button class="c-button c-button__filled c-button__filled--default c-button--md c-button__toggle" target="_top" data-js-toggle-trigger="iddd" data-js-toggle-group="example2" aria-pressed="false" type="basic" aria-label="Box One" data-uid="66057066f1fd3">   
     <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-outlined material-symbols-outlined--filled c-icon--size-md" aria-hidden="true" material-symbol="code" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" data-uid="66057066f2076">
                code
    </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" target="_top" data-js-toggle-trigger="iddd2" data-js-toggle-group="example2" aria-pressed="false" type="basic" aria-label="Box Two" data-uid="66057066f20f5">   
     <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-outlined material-symbols-outlined--filled c-icon--size-md" aria-hidden="true" material-symbol="code" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" data-uid="66057066f2150">
                code
    </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>

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