JSFiddle - React, Tailwind, and code Playground

http://stackoverflow.com/questions/11549543/how-do-i-create-an-elegant-accordination-menu

by lalatino

HTML

<nav id="mainNav">
              <ul>
                  <li><a href="#" title="">Menu Item 1</a>
                      <ul>
                          <li><a href="#" title="">Menu Item 2</a>
                              <ul>
                                  <li><a href="#" title="">Menu Item 2</a></li>
                                  <li><a href="#" title="">Menu Item 2</a></li>
                              </ul>
                          </li>
                          <li><a href="#" title="">Menu Item 2</a></li>
                      </ul>
                  </li>
                  <li><a href="#" title="">Menu Item 2</a>
                      <ul>
                          <li><a href="#" title="">Menu Item 2</a>
                              <ul>
                                  <li><a href="#" title="">Menu Item 2</a></li>
                                  <li><a href="#" title="">Menu Item 2</a></li>
                              </ul>
                          </li>
                          <li><a href="#" title="">Menu Item 2</a></li>
                          <li><a href="#" title="">Menu Item 2</a></li>
                      </ul>
                  </li>
                  <li><a href="#" title="">Menu Item 3</a>
                      <ul>
                          <li><a href="#" title="">Menu Item 2</a></li>
                          <li><a href="#" title="">Menu Item 2</a></li>
                      </ul>
                  </li>
                  <li><a href="#" title="">Menu Item 4</a></li>
                  <li><a href="#" title="">Menu Item 5</a></li>
              </ul>
          </nav><!-- /mainNav -->

CSS

#mainNav {
  background: #000;
}
#mainNav li {
  display: block;
}
#mainNav li a {
  color: #FFF;
  display: block;
  line-height: 2.5em;
}
#mainNav li ul {
  display: none;
}
#mainNav li ul li {
  background: #555;
}
#mainNav li ul li a {
  padding-left: 1em;
}
#mainNav li ul li ul {
  display: none;
}
#mainNav li ul li ul li {
  background: #999;
}
#mainNav li ul li ul li a {
  padding-left: 2em;
}
.active li a {
    color:red;
}

JavaScript

$('#mainNav li a').click(function(e) {
    //if ($(this).hasClass('active')) {
    var _main = $('#mainNav')[0];
    var old = $('#mainNav .active');
    var _this = this;
    while (_this!=_main) {
        _this = _this.parentNode;
        if (_this.tagName == 'UL') {
            $(_this).addClass('active');
        }
    }
    //alert($('.active').toSource());
    
    
    e.preventDefault();
    $('a').siblings().slideUp();
    $(this).next().slideDown();
    lastClick = this.parentNode;
});