Internetstiftelsen Styleguide

Toggle Button: External Target 

<button href="#" class="a-button a-button--icon" data-toggle-text="I am an external target|Foo" data-toggle-target="myToggleTarget" aria-describedby="myToggleTarget" aria-controls="myToggleTarget" aria-live="assertive">
    <span class="a-button__text">Toggle text</span>
    <svg class="icon a-button__icon" id="myIcon">
        <use xlink:href="#icon-arrow-forwards"></use>
    </svg>
</button>
<div id="myToggleTarget">I am an external target</div>
 
<button href="#" class="a-button a-button--icon" {{#if toggle_icon}}data-toggle-icon-target="myIcon" data-toggle-icon="arrow-forwards|check"{{/if}} {{#if toggle_text}}data-toggle-text="{{#if external_target}}{{toggle_text_secondary_value}}{{else}}{{toggle_text_primary_value}}{{/if}}|Foo{{#if toggle_thrice}}|Boohoo{{/if}}" data-toggle-target="{{target_id}}"{{/if}}{{#if external_target}} aria-describedby="{{target_id}}" aria-controls="{{target_id}}" aria-live="assertive"{{/if}}{{#if aria_pressed}}aria-pressed="false"{{/if}}>
	<span class="a-button__text" {{#unless external_target}}id="{{target_id}}"{{/unless}}>{{toggle_text_primary_value}}</span>
	<svg class="icon a-button__icon" id="myIcon">
		<use xlink:href="#icon-arrow-forwards"></use>
	</svg>
</button>
{{#if external_target}}
<div id="{{target_id}}">I am an external target</div>
{{/if}}
 
{
  "target_id": "myToggleTarget",
  "external_target": true,
  "toggle_text": true,
  "toggle_text_primary_value": "Toggle text",
  "toggle_icon": false,
  "toggle_text_secondary_value": "I am an external target"
}

Toggle button

This component uses the textToggle.js and iconToggle.js files located here: /assets/js/