Insites Docs Web Components V2LayoutAccordion

Accordion

Last updated on August 02, 2024.

Element: <ins-accordion>

Renders an accordion UI for your elements.

Complete Example
This is a dummy content inside this accordion component. This is also a dummy content inside this accordion component. This is another dummy content inside this accordion component. This accordion is disabled, so you are not able tosee this dummy content inside this accordion component.

HTML Heading

This accordion uses the component ins-accordion-item-heading so that HTML tags can be used in the accordion item heading.

Note that when using this in ins-accordion-item attribute heading, link and icon will not be applied since the HTML content is the priority.

Code Snippet

<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>
Nested Accordion
This accordion is nested and it holds 2 more accordion inside. This accordion is nested inside an accordion element. This accordion is also nested inside an accordion element. This is just a single accordion element. This is also a single accordion element.

Code Snippet

<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

Code Snippet

<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>

 

<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

 

Have a suggestion for this page?

Didn't quite find what you are looking for or have feedback on how we can make the content better then we would love to hear from you. Please provide us feedback and we will get back to you shortly.