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.
-
The #1 Designer’s Dummy Text
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. -
The #2 Designer’s Dummy Text
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. -
The #3 Designer’s Dummy Text
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.
<!-- 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.
-
The #1 Designer’s Dummy Text
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. -
The #2 Designer’s Dummy Text
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. -
The #3 Designer’s Dummy Text
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.
<!-- 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 -->