Skip to content

Component library

Accordion component

Last updated 2 November 2026

Renders an accordion UI for your elements.

Live demo

<ins-accordion>

<ins-accordion-item 
  heading="Information" 
  icon="icon-info"         
  open-icon="icon-book"
  close-icon="icon-book-open"
  active>
This is a dummy content inside this accordion component. 
</ins-accordion-item>

<ins-accordion-item 
  heading="Important" 
  icon="icon-alert-circle">
 This is also a dummy content inside this accordion component. 
</ins-accordion-item>

<ins-accordion-item 
  heading="Requirements" 
  icon="icon-alert-octagon">
This is another dummy content inside this accordion component. 
</ins-accordion-item>

<ins-accordion-item 
  heading="Conditions" 
  icon="icon-alert-triangle" 
  disabled>
This accordion is disabled, so you are not able tosee this dummy content inside this accordion component. 
</ins-accordion-item>
  
</ins-accordion>

<ins-accordion>
  
<ins-accordion-item active>
  <ins-accordion-item-heading>
    <p><i>HTML</i> <strong>Heading</strong> <span class="icon-alert-triangle"></span></p>
  </ins-accordion-item-heading>
  <p>This accordion uses the component <code>ins-accordion-item-heading</code> so that HTML tags can be used in the accordion item heading.</p>
  <p>Note that when using this in <code>ins-accordion-item</code> attribute <code>heading</code>, <code>link</code> and <code>icon</code> will not be applied since the HTML content is the priority.</p>
</ins-accordion-item>
  
 </ins-accordion>

Attributes

<ins-accordion> Attributes

FIELD ATTRIBUTE TYPE DEFAULT OPTIONS DESCRIPTION
menu boolean false true, false Renders the accordion as a menu
has-load method - - Insites method to be called when the component has been rendered

<ins-accordion-item> Attributes

FIELD ATTRIBUTE TYPE DEFAULT OPTIONS DESCRIPTION
heading string - - Defines the label of the menu
icon string - Insites Font Icons Defines the icon of the menu
open-icon string icon-angle-down Insites Font Icons Defines the open icon of the menu
close-icon string icon-angle-up Insites Font Icons Defines the close icon of the menu
link string - - Defines the link of the menu
link-target string _blank _blank, _self, _parent, _top, framename Defines where the link should open
active boolean false true, false Defines the active state of the menu
disabled boolean false true, false Defines the disabled state of the menu
arrow-activated boolean false true, false Defines if the menu should only open when clicking the arrow

<ins-accordion-link> Attributes

FIELD ATTRIBUTE TYPE DEFAULT OPTIONS DESCRIPTION
link string - - Defines the link of the menu
link-title string - - Defines the title of the anchor element
link-target string _blank _blank, _self, _parent, _top, framename Defines where the link should open
label string - - Defines the label of the menu
icon string - Insites Font Icons Defines the icon of the menu
active boolean false true, false Defines the active state of the menu
disabled boolean false true, false Defines the disabled state of the menu

Events

EVENT OBJECT DESCRIPTION
insToggle click/touch event Emits the menu being toggled and the action

Examples

Nested Accordion

<ins-accordion>

  <ins-accordion-item 
    heading="Information" 
    icon="icon-info" 
    active>
    
	This accordion is nested and it holds 2 more accordion inside.
    
    <ins-accordion>

      <ins-accordion-item 
         heading="Open Book" 
         icon="icon-book-open">
        
         This accordion is nested inside an accordion element.
        
      </ins-accordion-item>

      <ins-accordion-item 
        heading="Closed Book" 
        icon="icon-book">
        
        This accordion is also nested inside an accordion element.
        
      </ins-accordion-item>

    </ins-accordion>

  </ins-accordion-item>

  <ins-accordion-item 
    heading="Important" 
    icon="icon-alert-circle">

	This is just a single accordion element.

  </ins-accordion-item>

  <ins-accordion-item 
    heading="Requirements" 
    icon="icon-alert-octagon">

	This is also a single accordion element.

  </ins-accordion-item>

</ins-accordion>

Accordion Menu

<ins-accordion-link
  label="Link Before an Accordion"
  icon="icon-external-link"
  link="/web-components/v2-accordion">
</ins-accordion-link>

<ins-accordion menu>

  <ins-accordion-item heading="Other Links" icon="icon-link1">

    <ins-accordion-link 
      label="Only Label" 
      link="/web-components/v2-accordion">
    </ins-accordion-link>

    <ins-accordion-link 
      label="With Icon" 
      icon="icon-menu" 
      link="/web-components/v2-accordion">
    </ins-accordion-link>

    <ins-accordion-link 
      label="Active Link" 
      icon="icon-check1" 
      link="/web-components/v2-accordion" 
      active>
    </ins-accordion-link>

    <ins-accordion-link 
      label="Disabled Link" 
      icon="icon-link" 
      link="/web-components/v2-accordion" 
      disabled>
   </ins-accordion-link>

  </ins-accordion-item>

</ins-accordion>

<ins-accordion-link
  label="Link After an Accordion"
  icon="icon-external-link1"
  link="/web-components/v2-accordion">
</ins-accordion-link>