Portal UI

Accordion

A vertically stacked set of interactive headings that each reveal a section of content.

Yes. It adheres to the WAI-ARIA design pattern.

Yes. It comes with default styles that matches the other components' aesthetic.

Yes. It's animated by default, but you can disable it if you prefer.
<x-portal::accordion>
     <x-portal::accordion.item 
          value="1" 
          heading="Is it accessible?"
     >
          <x-portal::accordion.content>
               Yes. It adheres to the WAI-ARIA design pattern.
          </x-portal::accordion.content>
     </x-portal::accordion.item>
     <x-portal::accordion.item 
          value="2" 
          heading="Is it styled?"
     >
          <x-portal::accordion.content>
               Yes. It comes with default styles that matches the 
               other components' aesthetic.
          </x-portal::accordion.content>
     </x-portal::accordion.item>
     <x-portal::accordion.item 
          value="3" 
          heading="Is it animated?"
     >
          <x-portal::accordion.content>
               Yes. It's animated by default, but you can disable it if you prefer.
          </x-portal::accordion.content>
     </x-portal::accordion.item>
</x-portal::accordion>

Publishing Component

If you want to customize the components, you can publish them by running the following command :

php artisan vendor:publish --tag=portal-ui:accordion --force