Skip to content
PHIL
Français

Collapsible

component

A part of the page that opens and closes, on details and summary, without JavaScript.

Preview

Light

Three more people starred this project
  • Ada
  • Grace
  • Alan
Code 
<twig:Collapsible>
    <twig:Collapsible:Trigger>Three more people starred this project</twig:Collapsible:Trigger>
    <twig:Collapsible:Content>
        <ul><li>Ada</li><li>Grace</li><li>Alan</li></ul>
    </twig:Collapsible:Content>
</twig:Collapsible>

Dark

Three more people starred this project
  • Ada
  • Grace
  • Alan
Code 
<twig:Collapsible>
    <twig:Collapsible:Trigger>Three more people starred this project</twig:Collapsible:Trigger>
    <twig:Collapsible:Content>
        <ul><li>Ada</li><li>Grace</li><li>Alan</li></ul>
    </twig:Collapsible:Content>
</twig:Collapsible>

Try it

Change the props; the example is rendered again by the server.

Three more people starred this project
  • Ada
  • Grace
  • Alan
<twig:Collapsible>
    <twig:Collapsible:Trigger>Three more people starred this project</twig:Collapsible:Trigger>
    <twig:Collapsible:Content>
        <ul><li>Ada</li><li>Grace</li><li>Alan</li></ul>
    </twig:Collapsible:Content>
</twig:Collapsible>

Variants

open

Whether the collapsible is open on initial render.

Three more people starred this project
  • Ada
  • Grace
  • Alan
Three more people starred this project
  • Ada
  • Grace
  • Alan
open="false"
Three more people starred this project
  • Ada
  • Grace
  • Alan
Three more people starred this project
  • Ada
  • Grace
  • Alan
open="true"

disabled

Whether the collapsible is disabled.

Three more people starred this project
  • Ada
  • Grace
  • Alan
Three more people starred this project
  • Ada
  • Grace
  • Alan
disabled="false"
Three more people starred this project
  • Ada
  • Grace
  • Alan
Three more people starred this project
  • Ada
  • Grace
  • Alan
disabled="true"

Installation

php bin/console ux:install collapsible --kit=github.com/parler-haut-interagir-librement/ux-kit

Props

PropTypeDefaultDescription
open bool false Whether the collapsible is open on initial render.
disabled bool false Whether the collapsible is disabled.

Accessibility

The summary is the button: the browser says whether it is open, opens it at Enter and at the space bar, and opens it by itself when a search of the page finds a word inside.

Files to copy

templates/components/Collapsible.html.twig 
{%- props
    ## bool Whether the collapsible is open on initial render.
    open = false,
    ## bool Whether the collapsible is disabled.
    disabled = false
-%}
<details data-slot="collapsible"{% if open %} open{% endif %}{% if disabled %} inert{% endif %}{{ attributes.defaults({class: 'isCollapsible'}) }}>
{##- A `Collapsible:Trigger` followed by a `Collapsible:Content`. -#}
{%- block content %}{% endblock -%}
</details>
templates/components/Collapsible/Content.html.twig 
<div data-slot="collapsible-content"{{ attributes.defaults({class: 'isCollapsibleContent'}) }}>
{##- The content shown while the collapsible is open. -#}
{%- block content %}{% endblock -%}
</div>
templates/components/Collapsible/Trigger.html.twig 
<summary data-slot="collapsible-trigger"{{ attributes.defaults({class: 'isCollapsibleTrigger'}) }}>
{##- The label of the summary that opens and closes the content. -#}
{%- block content %}{% endblock -%}
</summary>