Accordion

In order to make accordion works, add these files. assets/css/rdta/components/rdta-accordion.css, assets/js/rdta/components/rdta-accordion.js

Then enable its functional.

document.addEventListener('DOMContentLoaded', function() {
    RDTAAccordion.init('.rd-accordion');
});

---

Examples

Source

The accordion maybe in ul element.

• Section 1

  Cras in lacus posuere, pulvinar lorem a, commodo ex. Ut a vestibulum urna. Sed hendrerit et nulla eget sollicitudin. Donec vitae ultrices lorem. Ut vitae molestie ex, et finibus eros. Cras euismod libero leo, ut cursus nisi viverra eget. Integer ac lacinia felis. Sed pretium eros ac dui feugiat, et egestas purus facilisis. Pellentesque eu quam mauris. Integer hendrerit nulla at est sollicitudin, a placerat arcu pharetra.

• Section 2

  Sed sit amet lacus ac tellus sollicitudin sollicitudin quis non sapien. Donec augue arcu, accumsan sit amet massa nec, pellentesque egestas mauris. Nulla quis vestibulum erat, feugiat euismod massa. Morbi bibendum magna quis lorem cursus porttitor. Phasellus condimentum justo non sodales dapibus. Cras eros elit, sollicitudin at porta sed, ultrices id nibh. In elementum libero placerat, bibendum nunc ac, malesuada lectus.

• Section 3

  Suspendisse efficitur, metus sed consectetur elementum, nulla turpis rutrum diam, ut mattis dolor dui a felis. Nullam at massa non lorem ornare dapibus sit amet ut enim. Donec id lacus dapibus, tempus tellus aliquam, rutrum ligula. Pellentesque pellentesque dui nec metus pharetra, in condimentum orci euismod. Nulla vehicula purus ut ex consectetur dignissim.

Source

Show only one

The accordion can be show only one body while other will be collapsed. Add data-accordion-one="true" to the element that contain rd-accordion class to enable this feature.

Source

Use <details> & <summary>

The accordion may use <details> & <summary> tags which the main function is handle by web browser that supported it. The attribute data-accordion-one="true" also supported.

Source