JavaScript

• Back link
• Show/hide

Show/hide

Open this example in a new tab

HTML

<div data-module="das-show-hide">
	<button class="govuk-button govuk-button--secondary das-show-hide__button" data-aria-controls="das-show-hide-example">Show/hide</button>
	<div id="das-show-hide-example">
		<div class="das-highlight">
			<p>Example content</p>
		</div>
	</div>
</div>

Adding text to the button

Option to allow you to add text to the toggle button. The following attribute can be added to the toggle button data-button-string="filter options"

Open this example in a new tab

HTML

<div data-module="das-show-hide">
	<button class="govuk-button govuk-button--secondary das-show-hide__button" data-aria-controls="das-show-hide-example" data-button-string="filter options">Show/hide</button>
	<div id="das-show-hide-example">
		<div class="das-highlight">
			<p>Example content</p>
		</div>
	</div>
</div>

Switch user focus

Option to allow you to switch user focus to an element. The following attribute can be added to the toggle button data-focus-id="das-show-hide-example-focus-id" - the value should match the ID of an element on the page.

Open this example in a new tab

HTML

<div data-module="das-show-hide">
	<button class="govuk-button govuk-button--secondary das-show-hide__button" data-aria-controls="das-show-hide-example" data-focus-id="das-show-hide-example-focus-id">Show/hide</button>
	<div id="das-show-hide-example">
		<div class="das-highlight">
			<label for="das-show-hide-example-focus-id" class="govuk-label">Text field</label>
			<input type="text" id="das-show-hide-example-focus-id" class="govuk-input govuk-input--width-20" />
		</div>
	</div>
</div>