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: The parameter "isOutlined" is not recognized in the component "button" in /var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Register.php on line 231
Warning: The parameter "isPrimary" is not recognized in the component "button" in /var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Register.php on line 231
Warning: The parameter "isCircle" is not recognized in the component "button" in /var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Register.php on line 231
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="673ed367d208d">
Toggle single
</h2>
<div class="u-margin__bottom--5" style="text-align: center;">
<br />
<b>Warning</b>: The parameter <b>"isOutlined"</b> is not recognized in the component <b>"button"</b> in <b>/var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Register.php</b> on line <b>231</b><br />
<br />
<b>Warning</b>: The parameter <b>"isPrimary"</b> is not recognized in the component <b>"button"</b> in <b>/var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Register.php</b> on line <b>231</b><br />
<br />
<b>Warning</b>: The parameter <b>"isCircle"</b> is not recognized in the component <b>"button"</b> in <b>/var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Register.php</b> on line <b>231</b><br />
<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="673ed367d2101">
<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="673ed367d2146">
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="673ed367d2179">
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="673ed367d21af">
<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" material-symbol="code" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="673ed367d2282">
</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="673ed367d22de">
<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" material-symbol="code" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="673ed367d2310">
</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 |