Rubick
Pages
Mail Settings
Users & Permissions
Transactions Report
Users
Russell Crowe
russellcrowe@left4code.com
Johnny Depp
johnnydepp@left4code.com
Johnny Depp
johnnydepp@left4code.com
Keanu Reeves
keanureeves@left4code.com
Products
Sony A7 III
Photography
Sony A7 III
Photography
Oppo Find X2 Pro
Smartphone & Tablet
Apple MacBook Pro 13
PC & Laptop

## Accordion

## Basic Accordion

Show example code
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

      HTMLOpenTagdiv id="faq-accordion-1" class="accordion"HTMLCloseTag HTMLOpenTagdiv class="accordion-item"HTMLCloseTag HTMLOpenTagdiv id="faq-accordion-content-1" class="accordion-header"HTMLCloseTag HTMLOpenTagbutton class="accordion-button" type="button" data-tw-toggle="collapse" data-tw-target="#faq-accordion-collapse-1" aria-expanded="true" aria-controls="faq-accordion-collapse-1"HTMLCloseTag OpenSSL Essentials: Working with SSL Certificates, Private Keys HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv id="faq-accordion-collapse-1" class="accordion-collapse collapse show" aria-labelledby="faq-accordion-content-1" data-tw-parent="#faq-accordion-1"HTMLCloseTag HTMLOpenTagdiv class="accordion-body text-slate-600 dark:text-slate-500 leading-relaxed"HTMLCloseTag Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="accordion-item"HTMLCloseTag HTMLOpenTagdiv id="faq-accordion-content-2" class="accordion-header"HTMLCloseTag HTMLOpenTagbutton class="accordion-button collapsed" type="button" data-tw-toggle="collapse" data-tw-target="#faq-accordion-collapse-2" aria-expanded="false" aria-controls="faq-accordion-collapse-2"HTMLCloseTag Understanding IP Addresses, Subnets, and CIDR Notation HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv id="faq-accordion-collapse-2" class="accordion-collapse collapse" aria-labelledby="faq-accordion-content-2" data-tw-parent="#faq-accordion-1"HTMLCloseTag HTMLOpenTagdiv class="accordion-body text-slate-600 dark:text-slate-500 leading-relaxed"HTMLCloseTag Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="accordion-item"HTMLCloseTag HTMLOpenTagdiv id="faq-accordion-content-3" class="accordion-header"HTMLCloseTag HTMLOpenTagbutton class="accordion-button collapsed" type="button" data-tw-toggle="collapse" data-tw-target="#faq-accordion-collapse-3" aria-expanded="false" aria-controls="faq-accordion-collapse-3"HTMLCloseTag How To Troubleshoot Common HTTP Error Codes HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv id="faq-accordion-collapse-3" class="accordion-collapse collapse" aria-labelledby="faq-accordion-content-3" data-tw-parent="#faq-accordion-1"HTMLCloseTag HTMLOpenTagdiv class="accordion-body text-slate-600 dark:text-slate-500 leading-relaxed"HTMLCloseTag Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="accordion-item"HTMLCloseTag HTMLOpenTagdiv id="faq-accordion-content-4" class="accordion-header"HTMLCloseTag HTMLOpenTagbutton class="accordion-button collapsed" type="button" data-tw-toggle="collapse" data-tw-target="#faq-accordion-collapse-4" aria-expanded="false" aria-controls="faq-accordion-collapse-4"HTMLCloseTag An Introduction to Securing your Linux VPS HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv id="faq-accordion-collapse-4" class="accordion-collapse collapse" aria-labelledby="faq-accordion-content-4" data-tw-parent="#faq-accordion-1"HTMLCloseTag HTMLOpenTagdiv class="accordion-body text-slate-600 dark:text-slate-500 leading-relaxed"HTMLCloseTag Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag

## Boxed Accordion

Show example code
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

      HTMLOpenTagdiv id="faq-accordion-2" class="accordion accordion-boxed"HTMLCloseTag HTMLOpenTagdiv class="accordion-item"HTMLCloseTag HTMLOpenTagdiv id="faq-accordion-content-5" class="accordion-header"HTMLCloseTag HTMLOpenTagbutton class="accordion-button" type="button" data-tw-toggle="collapse" data-tw-target="#faq-accordion-collapse-5" aria-expanded="true" aria-controls="faq-accordion-collapse-5"HTMLCloseTag OpenSSL Essentials: Working with SSL Certificates, Private Keys HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv id="faq-accordion-collapse-5" class="accordion-collapse collapse show" aria-labelledby="faq-accordion-content-5" data-tw-parent="#faq-accordion-2"HTMLCloseTag HTMLOpenTagdiv class="accordion-body text-slate-600 dark:text-slate-500 leading-relaxed"HTMLCloseTag Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="accordion-item"HTMLCloseTag HTMLOpenTagdiv id="faq-accordion-content-6" class="accordion-header"HTMLCloseTag HTMLOpenTagbutton class="accordion-button collapsed" type="button" data-tw-toggle="collapse" data-tw-target="#faq-accordion-collapse-6" aria-expanded="false" aria-controls="faq-accordion-collapse-6"HTMLCloseTag Understanding IP Addresses, Subnets, and CIDR Notation HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv id="faq-accordion-collapse-6" class="accordion-collapse collapse" aria-labelledby="faq-accordion-content-6" data-tw-parent="#faq-accordion-2"HTMLCloseTag HTMLOpenTagdiv class="accordion-body text-slate-600 dark:text-slate-500 leading-relaxed"HTMLCloseTag Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="accordion-item"HTMLCloseTag HTMLOpenTagdiv id="faq-accordion-content-7" class="accordion-header"HTMLCloseTag HTMLOpenTagbutton class="accordion-button collapsed" type="button" data-tw-toggle="collapse" data-tw-target="#faq-accordion-collapse-7" aria-expanded="false" aria-controls="faq-accordion-collapse-7"HTMLCloseTag How To Troubleshoot Common HTTP Error Codes HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv id="faq-accordion-collapse-7" class="accordion-collapse collapse" aria-labelledby="faq-accordion-content-7" data-tw-parent="#faq-accordion-2"HTMLCloseTag HTMLOpenTagdiv class="accordion-body text-slate-600 dark:text-slate-500 leading-relaxed"HTMLCloseTag Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="accordion-item"HTMLCloseTag HTMLOpenTagdiv id="faq-accordion-content-8" class="accordion-header"HTMLCloseTag HTMLOpenTagbutton class="accordion-button collapsed" type="button" data-tw-toggle="collapse" data-tw-target="#faq-accordion-collapse-8" aria-expanded="false" aria-controls="faq-accordion-collapse-8"HTMLCloseTag An Introduction to Securing your Linux VPS HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv id="faq-accordion-collapse-8" class="accordion-collapse collapse" aria-labelledby="faq-accordion-content-8" data-tw-parent="#faq-accordion-2"HTMLCloseTag HTMLOpenTagdiv class="accordion-body text-slate-600 dark:text-slate-500 leading-relaxed"HTMLCloseTag Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag

## Methods

Get or Create Instance
Static method which allows you to get the accordion instance associated with a DOM element, or create a new one in case it wasn’t initialized.

      const myAccordion = tailwind.Accordion.getOrCreateInstance(document.querySelector("#myAccordion"));

Get Instance
Static method which allows you to get the accordion instance associated with a DOM element.

      const myAccordion = tailwind.Accordion.getInstance(document.querySelector("#myAccordion"));

Hide
Manually hides an accordion. Returns to the caller before the accordion has actually been hidden (i.e. before the hidden.tw.accordion event occurs).

      myAccordion.hide();

Show
Manually opens an accordion. Returns to the caller before the accordion has actually been shown (i.e. before the shown.tw.accordion event occurs).

      myAccordion.show();

Toggle
Manually toggles an accordion. Returns to the caller before the accordion has actually been shown or hidden (i.e. before the shown.tw.accordion or hidden.tw.accordion event occurs).

      myAccordion.toggle();

## Events

Midone’s accordion class exposes a few events for hooking into accordion functionality. All accordion events are fired at the accordion itself (i.e. at the <div class="accordion">).

Event type | Description
--- | ---
show.tw.accordion | This event fires immediately when the show instance method is called.
hide.tw.accordion | This event is fired immediately when the hide instance method has been called.

      const myAccordionEl = document.getElementById('myAccordion') myAccordionEl.addEventListener('hidden.tw.accordion', function (event) { // do something... })

Dark Mode