SEO-friendly Accordion Menu In Vanilla JavaScript

Preview:

Description:

A small pure JavaScript library that transforms nested HTML unordered lists into a smooth multi-level accordion menu.

How to use it:

Create the HTML for the accordion menu.

<div class="accordion-menu example">
  <ul>
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a>
      <ul>
        <li><a href="#">Menu 3.1</a></li>
        <li><a href="#">Menu 3.2</a></li>
        <li><a href="#">Menu 3.3</a>
          <ul>
            <li><a href="#">Menu 3.3.1</a></li>
            <li><a href="#">Menu 3.3.2</a></li>
            <li><a href="#">Menu 3.3.3</a></li>
          </ul>
        </li>
        <li><a href="#">Menu 3.4</a>
          <ul>
            <li><a href="#">Menu 3.4.1</a></li>
            <li><a href="#">Menu 3.4.2</a>
            <ul>
              <li><a href="#">Menu 3.4.2.1</a></li>
              <li><a href="#">Menu 3.4.2.2</a></li>
              <li><a href="#">Menu 3.4.2.3</a></li>
            </ul>
          </li>
          <li><a href="#">Menu 3.4.3</a></li>
          </ul>
        </li>
        <li><a href="#">Menu 3.5</a></li>
      </ul>
    </li>
    <li><a href="#">Menu 4</a></li>
    <li><a href="#">Menu 5</a>
      <ul>
        <li><a href="#">Menu 5.1</a></li>
        <li><a href="#">Menu 5.2</a></li>
        <li><a href="#">Menu 5.3</a></li>
      </ul>
    </li>
  </ul>
</div>

Import the main JavaScript file accordion-menu.js into the document.

<script src="js/accordion-menu.js"></script>

Initialize the accordion menu.

new AccordionMenu('.example');

The example CSS for the accordion menu.

.accordion-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.accordion-menu li.open > ul {
  display: block;
}
.accordion-menu li > ul {
  /* position: absolute; */
  display: none;
  height: 0;
  overflow: hidden;
  transition: height 350ms ease-in-out;
  margin-left: 25px;
}
.accordion-menu ul.is-visible {
  display: block;
  /* height: auto; */
}
.accordion-menu li {
  border-bottom: 1px solid rgba(194, 194, 194, 0.333);
  position: relative;
  overflow: hidden;
  transition: all .4s ease;
}
.accordion-menu li:last-child {
  border: none;
}
.accordion-menu li::after {
  content: "";
  display: block;
  clear: both;
}
.accordion-menu li > a > svg {
  display: block;
  position: relative;
  fill: rgb(48, 48, 48);
  width: 10px;
  float: right;
  transition: all .3s ease;
}
.accordion-menu li.open > a > svg {
  transform: rotate(90deg);
}
.accordion-menu a {
  background-color: aliceblue;
  padding: 7px 20px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  text-decoration: none;
}
.accordion-menu * {
  box-sizing: border-box;
}