Doggo Storybook 0.9.0

Accordion

Renders a set of headings that control the visibility of their content sections.

Read more Read less

Usage

<.accordion id="dog-breeds">
  <:section title="Golden Retriever">
    <p>
      Friendly, intelligent, great with families. Origin: Scotland. Needs
      regular exercise.
    </p>
  </:section>
  <:section title="Siberian Husky">
    <p>
      Energetic, outgoing, distinctive appearance. Origin: Northeast Asia.
      Loves cold climates.
    </p>
  </:section>
  <:section title="Dachshund">
    <p>
      Playful, stubborn, small size. Origin: Germany. Enjoys sniffing games.
    </p>
  </:section>
</.accordion>

Attribute Type Documentation Default Value
class :any Any additional classes to be added. Variations of the component should be expressed via modifier attributes, and it is preferable to use styles on the parent container to arrange components on the page, but if you have to, you can use this attribute to pass additional utility classes to the component. The value can be a string or a list of strings. []
expanded :atom Defines how the accordion sections are initialized. - `:all` - All accordion sections are expanded by default. - `:none` - All accordion sections are hidden by default. - `:first` - Only the first accordion section is expanded by default. :all
heading :string The heading level for the section title (trigger). "h3"
Required id * :string
rest :global Any additional HTML attributes.
Required section * :slot 
<:section title="Golden Retriever">
  <p>
    Friendly, intelligent, great with families. Origin: Scotland. Needs
    regular exercise.
  </p>
</:section>
<:section title="Siberian Husky">
  <p>
    Energetic, outgoing, distinctive appearance. Origin: Northeast Asia.
    Loves cold climates.
  </p>
</:section>
<:section title="Dachshund">
  <p>
    Playful, stubborn, small size. Origin: Germany. Enjoys sniffing games.
  </p>
</:section>