Tiny Vertical Accordion Menu In jQuery

A minimal, clean, smooth, SEO-friendly accordion menu component built using jQuery, CSS/CSS3, nested HTML lists, and Font Awesome iconic font.

How to use it:

1. Load the necessary jQuery library and Font Awesome iconic font.

<link rel="stylesheet" href="/path/to/cdn/font-awesome/all.min.css" />
<script src="/path/to/cdn/jquery.min.js"></script>

2. Build the HTML structure for the accordion menu.

<ul class="accordion-menu">
  <li>
    <div class="dropdownlink"><i class="fa fa-road" aria-hidden="true"></i> History
      <i class="fa fa-chevron-down" aria-hidden="true"></i>
    </div>
    <ul class="submenuItems">
      <li><a href="#">History 1</a></li>
      <li><a href="#">History 2</a></li>
      <li><a href="#">History 3</a></li>
    </ul>
  </li>
  <li>
    <div class="dropdownlink"><i class="fa fa-paper-plane" aria-hidden="true"></i> Fiction
      <i class="fa fa-chevron-down" aria-hidden="true"></i>
    </div>
    <ul class="submenuItems">
      <li><a href="#">Fiction 1</a></li>
      <li><a href="#">Fiction 2</a></li>
      <li><a href="#">Fiction 3</a></li>
    </ul>
  </li>
  <li>
    <div class="dropdownlink"><i class="fa fa-quote-left" aria-hidden="true"></i> Fantasy
      <i class="fa fa-chevron-down" aria-hidden="true"></i>
    </div>
    <ul class="submenuItems">
      <li><a href="#">Fantasy 1</a></li>
      <li><a href="#">Fantasy 2</a></li>
      <li><a href="#">Fantasy 3</a></li>
    </ul>
  </li>
  <li>
    <div class="dropdownlink"><i class="fa fa-motorcycle" aria-hidden="true"></i> Action
      <i class="fa fa-chevron-down" aria-hidden="true"></i>
    </div>
    <ul class="submenuItems">
      <li><a href="#">Action 1</a></li>
      <li><a href="#">Action 2</a></li>
      <li><a href="#">Action 3</a></li>
    </ul>
  </li>
</ul>

3. The necessary CSS styles for the accordion menu.

.accordion-menu {
  width: 100%;
  max-width: 350px;
  margin: 60px auto 20px;
  background: #fff;
  border-radius: 4px;
}

.accordion-menu li.open .dropdownlink {
  color: #cddc39;
}

.accordion-menu li.open .dropdownlink .fa-chevron-down {
  transform: rotate(180deg);
}

.accordion-menu li:last-child .dropdownlink {
  border-bottom: 0;
}

.dropdownlink {
  cursor: pointer;
  display: block;
  padding: 15px 15px 15px 45px;
  font-size: 18px;
  border-bottom: 1px solid #ccc;
  color: #212121;
  position: relative;
  transition: all 0.4s ease-out;
}

.dropdownlink i {
  position: absolute;
  top: 17px;
  left: 16px;
}

.dropdownlink .fa-chevron-down {
  right: 12px;
  left: auto;
}

.submenuItems {
  display: none;
  background: #cbe6c9;
}

.submenuItems li {
  border-bottom: 1px solid #86b686;
}

.submenuItems a {
  display: block;
  color: #727272;
  padding: 12px 12px 12px 45px;
  transition: all 0.4s ease-out;
}

.submenuItems a:hover {
  background: #cddc39;
  color: #fff;
}

4. The main JavaScript (jQuery) to enable the accordion menu.

//Create Function
$(function () {

  var Accordion = function (el, multiple) {
    this.el = el || {};
    //More Than One Menu Open
    this.multiple = multiple || false;

    var dropdownlink = this.el.find('.dropdownlink');
    dropdownlink.on('click', {
        el: this.el,
        multiple: this.multiple
      },
      this.dropdown
    );
  };

  Accordion.prototype.dropdown = function (e) {
    var $el = e.data.el,
      $this = $(this),
      //ul submenuItems
      $next = $this.next();

    $next.slideToggle();
    $this.parent().toggleClass('open');

    if (!e.data.multiple) {
      //Show Only one Menu at the same time
      $el.find('.submenuItems').not($next).slideUp().parent().removeClass('open');
    }

  };

  //Set Object
  var accordion = new Accordion($('.accordion-menu'), false);
});

---

This awesome jQuery plugin is developed by codeexpress333. For more Advanced Usages, please check the demo page or visit the official website.