Tornado | Accordions

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 class's to overide the theme or you can edit it with sass Tornado Folder/SCSS/components/_accordion.scss and do not forget to compile the main files of the framework Tornado Folder/SCSS/tornado.scss and tornado-rtl.scss.

Accordions Structrue

in order to build an accordion list first you create a ul html and give it a class name accordion, then you ceate the li items and give it a class name accordion-item and inside of your list item goes 2 more elements the clickable element wich can be any tag with class name accordion-title with the arrow icon class ti-arrow-down-b or any other arrow icon from the icon list here and the second element is your hidden content element with class name accordion-content and for activate one of the items give you'r list item accordion-item a class name active 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">
    <!-- Accordion Item -->
    <li class="accordion-item">
        <!-- Accordion Title -->
        <h3 class="accordion-title ti-arrow-down-b">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 active">
        <!-- Accordion Title -->
        <h3 class="accordion-title ti-arrow-down-b">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-arrow-down-b">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 -->

Tabs Javascript Call Backs

tornado tabs provide Four Callback's functions that you can apply with HTML data attributes you give it to the accordion ==> Item ==> Title/Head and they work like this

data-call-before="but Your Function Name Without ()" to Fire the Function Before Accordion Panel Opens
data-call-after="but Your Function Name Without ()" to Fire the Function After Accordion Panel Opens

data-call-before-close="but Your Function Name Without ()" to Fire the Function Before Accordion Panel Closed
data-call-after-close="but Your Function Name Without ()" to Fire the Function After Accordion Panel Closed


<!-- Tabs Callback Functions -->
<ul class="accordion">
    <!-- Accordion Item -->
    <li class="accordion-item">
        <!-- Accordion Title -->
        <h3 class="accordion-title ti-arrow-down-b" data-call-before="functionName">Before Open the Panel</h3>
    </li>
    <!-- Accordion Item -->
    <li class="accordion-item">
        <!-- Accordion Title -->
        <h3 class="accordion-title ti-arrow-down-b" data-call-before-close="functionName">Before Close The Panel</h3>
    </li>
    <!-- Accordion Item -->
    <li class="accordion-item">
        <!-- Accordion Title -->
        <h3 class="accordion-title ti-arrow-down-b" data-call-after="functionName">After Open the Panel </h3>
    </li>
    <!-- Accordion Item -->
    <li class="accordion-item">
        <!-- Accordion Title -->
        <h3 class="accordion-title ti-arrow-down-b" data-call-after-close="functionName">After Close the Panel</h3>
    </li>
</ul>
<!-- // Accordion List -->

Accordions Styled

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 active">
        <!-- 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 -->

Next Modals Previous Tabs