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.

View repository, Opens in new windowView package, Opens in new window
$ npm i @ids-js/accordion-menu@0.18.6
Preview

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)
Contact us, Opens in new window