Accordion <kui-accordion>

<kui-accordion> provide an accordion layout for a group of sections

Attributes Configurations

Configure <kui-accordion> through the following attributes

Below is a list of the available attributes for configuring <kui-accordion>

Attribute Type Default value Description
kui-auto-collapse Boolean false Should the accordion auto collapse sections while keeping one expanded section at a time
kui-expanded-child-index Number 0 Defines section should be initially expanded

Basic Examples

The basic usage of <kui-accordion> is to provide an accordion container for your sections

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue lacus viverra vitae congue.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Scelerisque viverra mauris in aliquam sem fringilla ut morbi.

Lorem ipsum dolor sit amet
 
                        
	<kui-accordion>
		<kui-section kui-collapse-by="header" kui-style="primary" kui-header-title="at auctor" kui-outline="">
			<p>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
				dolore magna aliqua. Augue lacus viverra vitae congue.
			</p>
		</kui-section>
		<kui-section kui-collapse-by="header" kui-style="primary" kui-header-title="mauris pharetra" kui-outline="">
			<p>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
				dolore magna aliqua. Scelerisque viverra mauris in aliquam sem fringilla ut morbi.
			</p>
			<div slot="footer">Lorem ipsum dolor sit amet</div>
		</kui-section>
	</kui-accordion>

Section visibility

Control <kui-accordion> sections' visibility by auto collapsing them while keeping only one visible section at a time
Section 1 contents
Section 2 contents
Section 3 contents
 
                        
	<kui-accordion kui-auto-collapse="">
		<kui-section kui-collapse-by="header" kui-header-title="Section 1">
			<div>Section 1 contents</div>
		</kui-section>
		<kui-section kui-collapse-by="header" kui-header-title="Section 2">
			<div>Section 2 contents</div>
		</kui-section>
		<kui-section kui-collapse-by="header" kui-header-title="Section 3">
			<div>Section 3 contents</div>
		</kui-section>
	</kui-accordion>

Initial expanded section

The initially expanded section, only relevant when kui-auto-collapse is set to true
Section 1 contents
Section 2 contents
Section 3 contents
 
                        
	<kui-accordion kui-auto-collapse="" kui-expanded-child-index="1">
		<kui-section kui-collapse-by="header" kui-header-title="Section 1">
			<div>Section 1 contents</div>
		</kui-section>
		<kui-section kui-collapse-by="header" kui-header-title="Section 2">
			<div>Section 2 contents</div>
		</kui-section>
		<kui-section kui-collapse-by="header" kui-header-title="Section 3">
			<div>Section 3 contents</div>
		</kui-section>
	</kui-accordion>