Collapsible examples

Show params

Params

params:
- name: headerText
  type: string
  required: true
  description: If `headerHtml` is set, this is not required. Text to use within the header element (the visible part of the collapsible element). If `headerHtml` is provided, the `headerText` argument will be ignored.
- name: headerHtml
  type: string
  required: true
  description: If `headerText` is set, this is not required. HTML to use within the header element (the visible part of the collapsible element). If `headerHtml` is provided, the `headerText` argument will be ignored.
- name: text
  type: string
  required: true
  description: If `html` is set, this is not required. Text to use within the disclosed part of the collapsible element. If `html` is provided, the `text` argument will be ignored.
- name: html
  type: string
  required: true
  description: If `text` is set, this is not required. HTML to use within the disclosed part of the collapsible element. If `html` is provided, the `text` argument will be ignored.
- name: id
  type: string
  required: false
  description: Id to add to the collapsible element. Not required, but recommended to improve the accessibility.
- name: open
  type: boolean
  required: false
  description: If true, collapsible element will be expanded.
- name: classes
  type: string
  required: false
  description: Classes to add to the collapsible container element.
- name: attributes
  type: object
  required: false
  description: HTML attributes (for example data attributes) to add to the collapsible container element.

default

We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post.

Show code

Macro

{% from "components/collapsible/_macro.collapsible.njk" import componentCollapsible %}
{{ componentCollapsible({
  "id": "collapsible-example",
  "headerText": "Help with nationality",
  "text": "We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post."
})  }}

Markup

<!-- collapsible -->
<div x-data="{ isOpen:false }"  class="-my-px py-sm border-t border-b border-neutral-base">
  <h3>
  	<button @click="isOpen = !isOpen" x-bind:aria-expanded="String(isOpen)" id="collapsible-example-title" class="group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" aria-controls="collapsible-example">Help with nationality <span class="absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black" aria-hidden="true" x-text="isOpen? 'Ocultar' : 'Mostrar'">Mostrar</span></button>
  </h3>
  <div id="collapsible-example"        x-show="isOpen"
        x-transition:enter="transition ease-out duration-100 transform"
        x-transition:enter-start="opacity-0 scale-y-95"
        x-transition:enter-end="opacity-100 scale-y-100"
        x-transition:leave="transition ease-in duration-75 transform"
        x-transition:leave-start="opacity-100 scale-y-100"
        x-transition:leave-end="opacity-0 scale-y-95" class="py-sm">
    <p>
      We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post.
    </p>
  </div>
</div>
<!-- /collapsible -->

expanded

We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post.

Show code

Macro

{% from "components/collapsible/_macro.collapsible.njk" import componentCollapsible %}
{{ componentCollapsible({
  "id": "help-with-nationality",
  "headerText": "Help with nationality",
  "text": "We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post.",
  "open": true
})  }}

Markup

<!-- collapsible -->
<div x-data="{ isOpen:true }"  class="-my-px py-sm border-t border-b border-neutral-base">
  <h3>
  	<button @click="isOpen = !isOpen" x-bind:aria-expanded="String(isOpen)" id="help-with-nationality-title" class="group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" aria-controls="help-with-nationality">Help with nationality <span class="absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black" aria-hidden="true" x-text="isOpen? 'Ocultar' : 'Mostrar'">Mostrar</span></button>
  </h3>
  <div id="help-with-nationality"        x-show="isOpen"
        x-transition:enter="transition ease-out duration-100 transform"
        x-transition:enter-start="opacity-0 scale-y-95"
        x-transition:enter-end="opacity-100 scale-y-100"
        x-transition:leave="transition ease-in duration-75 transform"
        x-transition:leave-start="opacity-100 scale-y-100"
        x-transition:leave-end="opacity-0 scale-y-95" class="py-sm">
    <p>
      We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post.
    </p>
  </div>
</div>
<!-- /collapsible -->

with html

Problem with input
Show code

Macro

{% from "components/collapsible/_macro.collapsible.njk" import componentCollapsible %}
{{ componentCollapsible({
  "id": "collapsible-html-example",
  "headerText": "Where to find your ID",
  "html": "<label class=\" block font-semibold \" for=\"contact-phone\">Phone number</label>\n<span id=\"contact-phone-error\" class=\" block font-semibold text-alert-base \">Problem with input</span>\n<input class=\" mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base  border-alert-base ring-2 ring-alert-base \" name=\"contact-phone\" type=\"text\" id=\"contact-phone\" aria-describedby=\"contact-phone-error\">\n"
})  }}

Markup

<!-- collapsible -->
<div x-data="{ isOpen:false }"  class="-my-px py-sm border-t border-b border-neutral-base">
  <h3>
  	<button @click="isOpen = !isOpen" x-bind:aria-expanded="String(isOpen)" id="collapsible-html-example-title" class="group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" aria-controls="collapsible-html-example">Where to find your ID <span class="absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black" aria-hidden="true" x-text="isOpen? 'Ocultar' : 'Mostrar'">Mostrar</span></button>
  </h3>
  <div id="collapsible-html-example"        x-show="isOpen"
        x-transition:enter="transition ease-out duration-100 transform"
        x-transition:enter-start="opacity-0 scale-y-95"
        x-transition:enter-end="opacity-100 scale-y-100"
        x-transition:leave="transition ease-in duration-75 transform"
        x-transition:leave-start="opacity-100 scale-y-100"
        x-transition:leave-end="opacity-0 scale-y-95" class="py-sm">
    <label class=" block font-semibold " for="contact-phone">Phone number</label>
<span id="contact-phone-error" class=" block font-semibold text-alert-base ">Problem with input</span>
<input class=" mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base  border-alert-base ring-2 ring-alert-base " name="contact-phone" type="text" id="contact-phone" aria-describedby="contact-phone-error">

  </div>
</div>
<!-- /collapsible -->