Back to Accordion Menu-guidelines
JavaScriptThe latest version of this package is: 0.18.6, Opens in new window
Javascript library for the Accordion Menu Component
This component is compatible with ESM (ES6 module) and IIFE. See documentation examples below.
To be able to install this component, please refer to the Project Setup documentation.
$ npm i @ids-js/accordion-menu@0.18.6
Table of Contents
Features
There is currently no documentation for this section yet. However, there might be some more documentation after this section.
Contact the Design System team, Opens in new window for questions.
If you want to contribute, you can also
Usage
Other relevant components:
Install
$ npm i @ids-js/accordion-menu
Required markup
<nav class="if accordion-menu" role="menu">
<ul class="if">
<li class="if">
<a role="menuitem" class="if" href="/develop"> Develop </a>
</li>
<li class="if">
<a role="menuitem" class="if" href="/develop"> Resources </a>
</li>
<li class="if is-parent">
<a role="menuitem" href="/asd" class="if"> Introduction </a>
<div class="if accordion-menu">
<ul class="if">
<li class="if">
<a role="menuitem" href="/asdasd" class="if">
<span class="if icon ui house"></span>
Concept - Simply Personal
</a>
</li>
<li class="if">
<a role="menuitem" href="/asdasd" class="if"> The If Visual Identity at a glance </a>
</li>
</ul>
</div>
</li>
</ul>
</nav>
Init
import idsAccordionMenu from '@ids-js/accordion-menu';
const accordionMenus = document.querySelectorAll('.if.accordion-menu');
Array.prototype.slice.call(accordionMenus).forEach(idsAccordionMenu);
Api
idsAccordionMenu(el)
Initializes the Accordion Menu Component with the given arguments.
Param | Type | Description |
---|---|---|
el | HTMLElement |
The Accordion Menu DOM Element |
el : HTMLElement
The Accordion Menu DOM Element:
<nav class="if accordion-menu" role="menu">
<ul class="if">
<li class="if">
<a role="menuitem" class="if" href="/develop"> … </a>
</li>
…
<li class="if is-parent">
<a role="menuitem" href="/asd" class="if"> … </a>
<div class="if accordion-menu">
<ul class="if">
<li class="if">
<a role="menuitem" href="/asdasd" class="if"> … </a>
</li>
…
</ul>
</div>
</li>
</ul>
</nav>
Changelog
Change Log
All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.
0.17.0 (2021-10-21)
Code Refactoring
- 💡 Remove support for CommonJS (9f84d9a)
BREAKING CHANGES
- 🧨 We have removed the support for CommonJS for all @ids-js packages
0.16.1 (2021-10-21)
Bug Fixes
- Use common for cjs and main for esm (96f673d)
0.9.0 (2021-09-24)
Features
- 🎸 Add accordion menu js (658db18)