Back to Accordion Menu-guidelines

JavaScriptThe latest version of this package is: 0.17.4, 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.17.4

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

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