The mod.accordion() method automatically attaches event listeners for all <div class="mod-accordion"></div> elements on the page. Each event listener manages the hiding and showing of sections in the accordion by toggling their is-open class when clicked.
Method API
// Using mod(-plus).iife.min.js
window.mod.accordion();
// Using mod(-plus).esm.min.js
import { accordion } from 'path/to/mod(-plus).esm.min.js';
accordion();Usage Examples
Use the following usage examples to guide your implementation.
Examples Use Global JavaScript
For simplicity, all usage examples demonstrate usage with Mod's global JavaScript library (mod(-plus).iife.min.js). All documented behavior is identical in the ESM variant of Mod's JavaScript library.
Accordion HTML
<div class="mod-accordion">
<div class="mod-accordion-section">
<header class="mod-accordion-section-header">
<p>What is the difference between single-tenant and multi-tenant SaaS?</p>
<i class="mod-icon-chevron-down"></i>
</header>
<div class="mod-accordion-section-content">
<p>Single-tenant SaaS provides a dedicated instance of the software for each customer, with their own database and infrastructure. Multi-tenant SaaS hosts multiple customers on the same infrastructure with logical separation between their data. Multi-tenant is typically more cost-effective but offers less customization, while single-tenant provides better isolation and customization options.</p>
</div>
</div>
<!-- HTML for rest of component... -->
</div>Accordion JavaScript
window.mod.accordion();