Default Theme Dark Theme
Tornado Logo
Tornado has become Phenix Design System

Accourdion Component - Tornado UI

An accordion is Collapsible List of Content that allow user to toggle display its hidden content.

Sass Customize

in order to edit the Accordions you can use the css classes to overide the theme or you can edit it with sass src/SCSS/components/_accordion.scss

Accordion Initialize

Tornado has Typescript Method to Activate Accordion functionality you can call out the method like this Tornado.accordion(selector); and the selector must represent the accordion items buttons class name then you can define the options that you want your accordion to preforms.

//=====> Import Tornado Methods <=====//
import Tornado from './Base/Tornado';
//====> Method Usage <====//
Tornado.accordion('.accordion-item .accordion-title', {..options..});

Accordions Markup

the Accordions works on specific HTML markup structure and its build to be like this a list of all accordion items each item has class name .accordion-item and each item has a triger title with class name .accordion-title and if you need icon use tornado icons then the content wraper with class name .accordion-content thats it look at the code below.

<!-- Accordion List -->
<ul class="accordion">
<!-- Accordion Item -->
<li class="accordion-item">
<!-- Accordion Title -->
<h3 class="accordion-title ti-arrow-down-b">..Title..</h3>
<!-- Accordion Content -->
<div class="accordion-content">..Content..</div>
</li>
<!-- Accordion Item -->
<li class="accordion-item active">
<!-- Accordion Title -->
<h3 class="accordion-title ti-arrow-down-b">..Title..</h3>
<!-- Accordion Content -->
<div class="accordion-content">..Content..</div>
</li>
<!-- Accordion Item -->
<li class="accordion-item">
<!-- Accordion Title -->
<h3 class="accordion-title ti-arrow-down-b">..Title..</h3>
<!-- Accordion Content -->
<div class="accordion-content">..Content..</div>
</li>
..more items..
</ul>
<!-- // Accordion List -->

Accordion Options

this a list of the accordion options and methods that you can use to configure and manipulate your accordion and keep in your mind that any call back function must pass button argument and panel argument to do stuff to them.

//====> Activate Tabs <====//
Tornado.accordion('.accordion-item .accordion-title', {
onChange : (btn,panel) => { }, //===> While Panel Change Call Back Function
onHide : (btn,panel) => { }, //===> When Panel Hide Call Back Function
onShow : (btn,panel) => { }, //===> When Panel Shows Call Back Function
});

Accordions Theme

Tornado Accordion has More one themed mode wich you can switch to it by adding class name tornado-accordion see the example below.

<!-- Accordion List -->
<ul class="accordion tornado-accordion">
<!-- Accordion Item -->
<li class="accordion-item">
<!-- Accordion Title -->
<h3 class="accordion-title ti-plus">The #1 Designer's Dummy Text </h3>
<!-- Accordion Content -->
<div class="accordion-content">Poor Cicero’s masterpiece wasn’t mangled into unintelligible space-filling mumbo-jumbo until sometime in the middle ages. A typesetter, seeking copy that would showcase different fonts without being distracting, plucked the passage out of the original work and co-opted it for his own evil purposes.</div>
</li>
<!-- Accordion Item -->
<li class="accordion-item">
<!-- Accordion Title -->
<h3 class="accordion-title ti-plus">The #2 Designer's Dummy Text </h3>
<!-- Accordion Content -->
<div class="accordion-content">Poor Cicero’s masterpiece wasn’t mangled into unintelligible space-filling mumbo-jumbo until sometime in the middle ages. A typesetter, seeking copy that would showcase different fonts without being distracting, plucked the passage out of the original work and co-opted it for his own evil purposes.</div>
</li>
<!-- Accordion Item -->
<li class="accordion-item">
<!-- Accordion Title -->
<h3 class="accordion-title ti-plus">The #3 Designer's Dummy Text </h3>
<!-- Accordion Content -->
<div class="accordion-content">Poor Cicero’s masterpiece wasn’t mangled into unintelligible space-filling mumbo-jumbo until sometime in the middle ages. A typesetter, seeking copy that would showcase different fonts without being distracting, plucked the passage out of the original work and co-opted it for his own evil purposes.</div>
</li>
</ul>
<!-- // Accordion List -->

Copyright (c) 2016-present, Tornado UI Licensed under the terms of the MIT License.