Collapsible

New

Collapsible is a disclosure component used to reveal additional content. It should contain a heading, followed by any additional content that is revealed on click.

Examples

<duet-collapsible heading="Click to open details">
  Lorem ipsum dolor sit, amet consectetur adipisicing elit. 
  Aperiam impedit, possimus minima repudiandae.
</duet-collapsible>

<script>
  // Select the above component
  var collapsible = document.querySelector("duet-collapsible")

  // Listen for toggle events
  collapsible.addEventListener("duetToggle", function(e) {
    console.log("open", e.target.open)
  })
</script>

<duet-collapsible heading="Click to open details">
    Lorem ipsum dolor sit, amet consectetur adipisicing elit.
    Aperiam impedit, possimus minima repudiandae.
</duet-collapsible>
<duet-divider margin="small"></duet-divider>
<duet-collapsible heading="Click to open">
  Lorem ipsum dolor sit, amet consectetur adipisicing elit.
</duet-collapsible>
<duet-divider margin="small"></duet-divider>
<duet-collapsible heading="Click to">
  Lorem ipsum dolor sit, amet consectetur adipisicing elit.
</duet-collapsible>
<duet-divider margin="small"></duet-divider>
<duet-collapsible heading="Click to open">
  Lorem ipsum dolor sit, amet consectetur adipisicing elit.
</duet-collapsible>

<duet-collapsible heading="Click to open details" open>
  Lorem ipsum dolor sit, amet consectetur adipisicing elit.
</duet-collapsible>

Properties #

Events #

Dependencies #

Depends on #

• duet-icon

Graph #

graph TD;
  duet-collapsible --> duet-icon
  style duet-collapsible fill:#f9f,stroke:#333,stroke-width:4px

Integration

For integration, event and theming guidelines, please see Using Components. This documentation explains how to implement and use Duet’s components across different technologies like Angular, React or Vanilla JavaScript.

Tutorials

Follow these practical tutorials to learn how to build simple page layouts using Duet’s CSS Framework, Web Components and other features:

Troubleshooting

If you experience any issues while using a component, please head over to the Support page for more guidelines and help.