The Accordion component is entirely declarative. You do not need to write any JavaScript to initialize it.
Simply add the accordian='true' attribute to a container `div`, and TMJRock will automatically
convert the alternating Heading and `div` pairs inside it into an interactive accordion.
Example 1: Basic Accordion
Click the headers below to expand the panels. Notice how opening one panel automatically closes the other.
Section 1: The Concept
An accordion is a vertically stacked list of items, such as labels or thumbnails. Each item can be
"expanded" or "collapsed" to reveal the content associated with that item.
Section 2: The Rules
To use TMJRock's accordion, the parent container must have accordian='true'.
Inside, elements must be strictly paired: a Heading tag (H1-H6) immediately followed by a DIV containing
the content.
Section 3: Custom Styling
TMJRock handles the JavaScript display logic (none to block). You are completely free to write your own
CSS to style the headers and the content boxes exactly how you want them.
<div accordian='true'>
<h5>Section 1: The Concept</h5>
<div>
An accordion is a vertically stacked list of items...
</div>
<h4>Section 2: The Rules</h4>
<div>
To use TMJRock's accordion, the parent container must...
</div>
</div>
Example 2: Multiple Accordions (FAQ)
TMJRock supports multiple, independent accordions on the same page. Expanding a panel in this accordion will not affect the one above.
Q: Is TMJRock free to use?
Yes! TMJRock is a lightweight JavaScript utility library designed as an architectural learning exercise for personal projects.
Q: Do I need jQuery?
No. TMJRock is built entirely with vanilla JavaScript, which means it has zero external dependencies and loads instantly.
Q: What if I mess up the HTML structure?
If your heading and div tags are not perfectly paired (e.g., you put two divs in a row), TMJRock's initialization framework will immediately throw a helpful exception in the console: 'Heading and division malformed to create accordian'.