Accordion
The Triton Accordion is a user interface element that allows for the display of expandable and collapsible content sections. It provides a compact and organized way to present information, where only one section is visible at a time while the others are hidden. Users can toggle the visibility of the sections by clicking on their respective headers, providing a seamless way to access additional content without overwhelming the interface.
Basic Usage
<triton-accordion>
<triton-accordion-item header="Open me">some content</triton-accordion-item>
<triton-accordion-item header="Open me">Item One</triton-accordion-item>
<triton-accordion-item header="Open me">Item Two</triton-accordion-item>
<triton-accordion-item header="Open me">some content</triton-accordion-item>
</triton-accordion>
<TritonAccordion>
<TritonAccordionItem header="Accordion">
Some content
</TritonAccordionItem>
</TritonAccordion>
<html>
<head>
<script type="module">
import { defineCustomElements } from '~node_modules/@kognifai/triton-cl-core/loader/index.es2017.js';
defineCustomElements();
</script>
</head>
<body>
<triton-accordion>
<triton-accordion-item header="Open me">some content</triton-accordion-item>
<triton-accordion-item header="Open me">Item One</triton-accordion-item>
<triton-accordion-item header="Open me">Item Two</triton-accordion-item>
<triton-accordion-item header="Open me">some content</triton-accordion-item>
</triton-accordion>
</body>
</html>
Some content
Some more content
Variants
Accordion
To render an accordion, wrap accordion-items with <triton-accordion>. This wrapper will apply style and prevent
unwanted events from child conmponents to propagate outside the accordion.
<triton-accordion>
...
</triton-accordion>
Items
A TritonAccordion consists of TritonAccordionItem elements. These are the items which will be rendered in the accordion.
<triton-accordion>
<triton-accordion-item header="Open me">accordion Item 1</triton-accordion-item>
<triton-accordion-item header="Open me">accordion Item 2</triton-accordion-item>
<triton-accordion-item header="Open me">accordion Item 3</triton-accordion-item>
</triton-accordion>
Header
Set the header property to edit the text to be displayed at the top of the accordion. This is the part that is visible before it expands.
<triton-accordion>
<triton-accordion-item header="Open me">Header!</triton-accordion-item>
<triton-accordion-item header="Open me">accordion Item 1</triton-accordion-item>
<triton-accordion-item header="Open me">some content</triton-accordion-item>
</triton-accordion>
Appearance
Skin
The accordion can be styled using the skin property.
<triton-accordion skin="flat">
<triton-accordion-item header="Open me">Flat accordion Item</triton-accordion-item>
<triton-accordion-item header="Open me">Flat accordion Item</triton-accordion-item>
<triton-accordion-item header="Open me">Flat accordion Item</triton-accordion-item>
</triton-accordion>
<triton-accordion skin="semi-border">
<triton-accordion-item header="Open me">Semi-border accordion Item</triton-accordion-item>
<triton-accordion-item header="Open me">Semi-border accordion Item</triton-accordion-item>
<triton-accordion-item header="Open me">Semi-border accordion Item</triton-accordion-item>
</triton-accordion>
Behavior
Multiple-Open
Set the multiple-open property to true, to enable multiple accordion items to be open simultneously.
<triton-accordion multiple-open>
<triton-accordion-item header="Open me">1 accordion Item</triton-accordion-item>
<triton-accordion-item header="Open me">2 accordion Item</triton-accordion-item>
<triton-accordion-item header="Open me">3 accordion Item</triton-accordion-item>
</triton-accordion>
API
Properties
TritonAccordion
| Property | Description | Type | Default |
|---|---|---|---|
background | skin to apply to the accordion | grey transparent | 'grey' |
multiple-open | boolean | false | |
skin | skin to apply to the accordion | border flat gap semi-border | 'border' |
TritonAccordionItem
| Property | Description | Type | Default |
|---|---|---|---|
active | the openclose state of the accordion | boolean | - |
animation | If true an animation will fire when the accordion opens and closes | boolean | true |
header | title to display in the header of the accordion | string | - |
icon-closed | Icon to display in the header when state is not active | Icon | 'chevron-down' |
icon-open | Icon to display in the header when state is active | Icon | 'chevron-up' |