No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from. 


  




  
  


Accordion


Toggle the visibility of a set of related content in your project.


The <post-accordion> is a container for <post-accordion-item> components.
It is used to manage how content is shown and hidden across a set of collapsible elements.



    
      
        Titulum 1
        
Contentus momentus vero siteos et accusam iretea et justo.

      

      
        Titulum 2
        
Contentus momentus vero siteos et accusam iretea et justo.

      

      
        Titulum 3
        
Contentus momentus vero siteos et accusam iretea et justo.

      
    
  
<post-accordion>
  <post-accordion-item>
    <span slot="header">Titulum 1</span>
    <p>Contentus momentus vero siteos et accusam iretea et justo.</p>
  </post-accordion-item>

  <post-accordion-item>
    <span slot="header">Titulum 2</span>
    <p>Contentus momentus vero siteos et accusam iretea et justo.</p>
  </post-accordion-item>

  <post-accordion-item>
    <span slot="header">Titulum 3</span>
    <p>Contentus momentus vero siteos et accusam iretea et justo.</p>
  </post-accordion-item>
</post-accordion>


NameDescriptionDefaultControl 
props
multiple
If true, multiple post-accordion-item can be open at the same time.
boolean
false
methods
collapseAll
Collapses all post-accordion-item.
collapseAll() => Promise<void>
--
expandAll
Expands all post-accordion-item.
If close-others is true and all items are closed, it will open the first one.
Otherwise, it will keep the opened one.
expandAll() => Promise<void>
--
toggle
Toggles the post-accordion-item with the given id.
toggle(id: string) => Promise<void>
--
slots
default
Slot for placing post-accordion-item components.
--
Events
collapseChange
An event emitted when the collapse element is shown or hidden, before the transition.
The event payload is a boolean: true if the collapsible was opened, false if it was closed.
boolean
--



The <post-accordion> element is part of the @swisspost/design-system-components package.
For more information, read the getting started with components guide.




By default, whenever a panel is opened manually or programmatically, any other open panel is closed.
To allow multiple panels to be open at the same time, simply use the multiple="true" property.



    
      
        Titulum 1
        
Contentus momentus vero siteos et accusam iretea et justo.

      

      
        Titulum 2
        
Contentus momentus vero siteos et accusam iretea et justo.

      

      
        Titulum 3
        
Contentus momentus vero siteos et accusam iretea et justo.

      
    
  



By default, the first panel is opened. You can control this behavior by adding the prop collapsed to one or multiple post-accordion-item.
When adding collapsed to the first item, the next item will be opened.



    
      
        Titulum 1
        
Contentus momentus vero siteos et accusam iretea et justo.

      

      
        Titulum 2
        
Contentus momentus vero siteos et accusam iretea et justo.

      

      
        Titulum 3
        
Contentus momentus vero siteos et accusam iretea et justo.

      
    
  


Multiple items can be opened by default when adding multiple="true" property to the post-accordion element.



    
      
        Titulum 1
        
Contentus momentus vero siteos et accusam iretea et justo.

      

      
        Titulum 2
        
Contentus momentus vero siteos et accusam iretea et justo.

      

      
        Titulum 3
        
Contentus momentus vero siteos et accusam iretea et justo.

      
    
  



The <post-accordion> offers several methods to expand or collapse the <post-accordion-item> it contains.


Expand or collapse all elements at once using .expandAll() and .collapseAll() respectively,
or toggle just one using .toggle() specifying the id of the element you want to act on.


const accordion = document.querySelector('post-accordion') as HTMLPostAccordionElement;
accordion.expandAll();
accordion.collapseAll();
accordion.toggle('collapsibleId');