Insites Docs Web Components V1OthersAccordion

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 to see this dummy content inside this accordion.

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" 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 to see this dummy content inside this accordion.
  </ins-accordion-item>

  <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 just 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 just 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/v1-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/v1-accordion">
    </ins-accordion-link>
    <ins-accordion-link 
		label="With Icon" 
		icon="icon-menu"
		link="/web-components/v1-accordion">
    </ins-accordion-link>
    <ins-accordion-link active
		label="Active Link" 
		icon="icon-check1" 
		link="/web-components/v1-accordion">
    </ins-accordion-link>
    <ins-accordion-link disabled
		label="Disabled Link" 
		icon="icon-link" 
		link="/web-components/v1-accordion">
    </ins-accordion-link>
  </ins-accordion-item>

</ins-accordion>

<ins-accordion-link
  label="Link After an Accordion"
  icon="icon-external-link1"
  link="/web-components/v1-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
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
didLoad lifecycle event Emits an event when the component has been rendered
toggle 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.