Accordion

What is Phoenix Duskmoon UI? A comprehensive component library for Phoenix LiveView applications. How do I install it? Add phoenix_duskmoon to your mix.exs dependencies. Is it open source? Yes, it is available on GitHub and Hex.pm.
<.dm_accordion id="accordion-single-default">
  <:item value="s1" header="What is Phoenix Duskmoon UI?">A comprehensive component library for Phoenix LiveView applications.</:item>
  <:item value="s2" header="How do I install it?">Add phoenix_duskmoon to your mix.exs dependencies.</:item>
  <:item value="s3" header="Is it open source?">Yes, it is available on GitHub and Hex.pm.</:item>
</.dm_accordion>
Section One First section content Section Two Second section content Section Three Third section content
<.dm_accordion id="accordion-single-multiple-open" value="s1,s3" multiple>
  <:item value="s1" header="Section One">First section content</:item>
  <:item value="s2" header="Section Two">Second section content</:item>
  <:item value="s3" header="Section Three">Third section content</:item>
</.dm_accordion>
Active Item This item can be toggled. Disabled Item This item cannot be toggled.
<.dm_accordion id="accordion-single-with-disabled">
  <:item value="active" header="Active Item">This item can be toggled.</:item>
  <:item value="disabled" header="Disabled Item" disabled>This item cannot be toggled.</:item>
</.dm_accordion>
Initially Open This section starts open. Closed by Default Click to expand.
<.dm_accordion id="accordion-single-initially-open" value="faq1">
  <:item value="faq1" header="Initially Open">This section starts open.</:item>
  <:item value="faq2" header="Closed by Default">Click to expand.</:item>
</.dm_accordion>