ACCOURDION COMPONENT

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

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 trigger 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 which 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 -->