Today I want to share an accordion component built with the Prototype JavaScript framework. The Prototype framework has its own powerful class system that makes building reusable UI components clean and straightforward.
What is an accordion?
An accordion is a UI pattern where multiple panels stack vertically, and clicking a panel header reveals its content while collapsing the others. It's excellent for FAQs, navigation menus, and any content-heavy interface.
Basic usage:
document.observe('dom:loaded', function() {
new Accordion('accordion-container', {
duration: 0.4,
transition: Effect.Transitions.sinoidal
});
});HTML structure:
<div id="accordion-container">
<div class="accordion-section">
<h3 class="accordion-header">Section One</h3>
<div class="accordion-content">
<p>Content for section one goes here.</p>
</div>
</div>
<div class="accordion-section">
<h3 class="accordion-header">Section Two</h3>
<div class="accordion-content">
<p>Content for section two.</p>
</div>
</div>
</div>Parameters:
- duration — animation duration in seconds (e.g.
0.4) - transition — Scriptaculous transition effect (sinoidal, linear, spring, etc.)
- initialSection — index of the section to open by default (0-based)
- onActivate — callback fired when a section opens
This modified version also supports opening multiple sections simultaneously if needed — useful when you want to allow users to compare content across panels.
See the live demo: https://markup-javascript.com/examples/example_accordion/index.html