Accordion

Basic Accordion

Show example code

OpenSSL Essentials: Working with SSL Certificates, Private Keys

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.

Understanding IP Addresses, Subnets, and CIDR Notation

How To Troubleshoot Common HTTP Error Codes

An Introduction to Securing your Linux VPS

  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

OpenSSL Essentials: Working with SSL Certificates, Private Keys

Understanding IP Addresses, Subnets, and CIDR Notation

How To Troubleshoot Common HTTP Error Codes

An Introduction to Securing your Linux VPS

  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... })