Elemental.DataDisplay.Accordion (elemental v0.3.2)

Implements a vertical stacking accordion component, allowing the display of content in a stack where only one is showing at a given time.

This is internally build (inline with Daisy) on top of Elemental.DataDisplay.Collapse component using the collapse's grouping feature implemented by Elemental.

Usage 

<.accordion>
  <:item title="How do I create an account?">
    Click the "Sign Up" button in the top right corner and follow the registration process.
  </:item>
  <:item title="I forgot my password. What should I do?">
    Click on "Forgot Password" on the login page and follow the instructions sent to your email.
  </:item>
  <:item title="How do I update my profile information?">
    Go to "My Account" settings and select "Edit Profile" to make changes.
  </:item>
</.accordion>

Notes

Usage of slots instead of components is intentional to limit flexibility to allow for the component to be more streamlined and have a clearer API that doesn't do any magic behind the scenes. For more complex use cases you can directly use Elemental.DataDisplay.Collapse.

Summary

Functions

accordion(assigns)

The primary accordion component.

Functions

accordion(assigns)

The primary accordion component.

Attributes

  • name (:string) - The name of the accordion. This must be unique in order to behave correctly and internally is passed to Elemental.DataDisplay.Collapse.collapse/1 group attribute.

    Defaults to "accordion".

  • class (:any) - Additional classes to style the wrapper container. Defaults to nil.

  • indicator (:string) - Chose the indicator to use to showcase if the section is shown/hidden. Defaults to "none".

Slots

  • item (required) - The specific items to show in the accordion. Internally these will translate to Elemental.DataDisplay.Collapse.collapse/1 components for each item.Title is passed under a <div> to the :title slot of the collapse component whereas the item itself is used as the body of the collapse component.Accepts attributes:
    • title (:string) (required) - The title of the collapsible section.
    • title_class (:string) - Any additional classes to pass title.
    • class (:any) - Additional classes to pass to the internal collapse component.