title: Collapse
name: collapse
variants:
  - name: header
    title: Collapse with complex header
    notes: |
      As it is not semantically valid to use an element such as <p> as a child of <button>, this structure can be used when more content is needed in the collapse header.

  - name: partial
    title: Partial collapse
    notes: |
      The partial collapse allows you to show part of a content to the user. When it is closed, it will fade to white towards the bottom where it is cut. \
      To define the default height of the collapse, you can use `collapse-partial-1` to `collapse-partial-9` classes on the `.collapse-partial` tag.

notes: |
  Collapse component contains chunks of content. You can **display or hide** this content by triggering it. Use it when content is dense and you want to suggest **extra readings**. The collapsed content should not be critical for the reader. You may also allow collapsible items to be open at the same time.

  The collapse JavaScript plugin serves to show and hide content. Buttons or anchors are triggers mapped to the specific elements you toggle. Collapsing an element will `animate the height` from its current value to `0`. Given how CSS handles animations, you cannot use padding on a `.collapse` element. Instead, use the class as an independent wrapping element.

  These elements are useful in groups. Use them to display various types of information, the most common use being **FAQ sections**. For more information, see the [collapse-group molecule](#/molecules/collapse-group).