Accordion

Published on February 04, 2021, updated on August 17, 2023

Just like the famous instrument, the Accordion component is a set of vertical tabs that opens up upon click to reveal more details. The Insites component specifically offers custom modes such as Nesting (item under items), items opening up in new tabs, and many more!

Requirements

To use the buttons component in Figma please install the latest version of the Insites Font Icons.

Download the latest font file here.
Install the font file on your machine.
Restart Figma to load the file in your font list.

How to change icons in Figma

Open the icons list here.
Select and copy the icon you want to use from the list
Paste the icon into the icon layer in the component.

Figma Component Variant Properties

Accordion Item

Properties	Options	Notes
Open	True False	Toggle to select if the accordion is opened or closed.
Hover	True, False	Toggle to enable the hover state for the component.
Show Default Heading	True, False	Toggle to show or hide the default heading for the component.
Show Heading Icon	True, False	Toggle to show or hide the icon in the default heading for the component.
Show HTML Heading	True, False	Toggle to show the custom content placeholder for the component.

Accordion Link

Properties	Options	Notes
Active	True, False	Toggle to enable the active state of the component.
Hover	True, False	Toggle to enable the hover state for the component.
Show Icon	True, False	Toggle to show the icon for the label.

Accordion Menu Link

Properties	Options	Notes
Open	True, False	Toggle to select if the accordion is opened or closed.
Hover	True, False	Toggle to enable the hover state for the component.
Show Heading Icon	True, False	Toggle to show the icon for the label.

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.