title: Accordion menu - active state
body: <p>I've lately managed to make my accordion menu. I did everything besides this one thing I'm looking for help.</p>
  
  <p>This is my accordion menu:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="sidebar-wrapper"&gt;
      &lt;ul class="main_nav"&gt;
         &lt;li&gt;&lt;a href='#'&gt;MAIN 1&lt;/a&gt;
            &lt;ul class="sub-menu"&gt;
               &lt;li&gt;&lt;a href='#'&gt;SUB MENU&lt;/a&gt;
                  &lt;ul class="sub-menu"&gt;
                     &lt;li&gt;&lt;a href='#'&gt;SUB-SUB MENU&lt;/a&gt;&lt;/li&gt;
                     &lt;li&gt;&lt;a href='#'&gt;SUB-SUB MENU&lt;/a&gt;&lt;/li&gt;
                     &lt;li&gt;&lt;a href='#'&gt;SUB-SUB MENU&lt;/a&gt;&lt;/li&gt;
                     &lt;li&gt;&lt;a href='#'&gt;SUB-SUB MENU&lt;/a&gt;&lt;/li&gt;
                     &lt;li&gt;&lt;a href='#'&gt;SUB-SUB MENU&lt;/a&gt;&lt;/li&gt;
                     &lt;li&gt;&lt;a href='#'&gt;SUB-SUB MENU&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
               &lt;/li&gt;
               &lt;li&gt;&lt;a href='#'&gt;SUB MENU&lt;/a&gt;
                  &lt;ul class="sub-menu"&gt;
                     &lt;li&gt;&lt;a href='#'&gt;SUB-SUB MENU&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
               &lt;/li&gt;
               &lt;li&gt;&lt;a href='#'&gt;SUB MENU&lt;/a&gt;
                  &lt;ul class="sub-menu"&gt;
                     &lt;li&gt;&lt;a href='#'&gt;SUB-SUB MENU&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
               &lt;/li&gt;
               &lt;li&gt;&lt;a href='#'&gt;SUB MENU&lt;/a&gt;
                 &lt;ul class="sub-sub-menu"&gt;
                     &lt;li&gt;&lt;a href='#'&gt;SUB-SUB MENU&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
               &lt;/li&gt;
               &lt;li&gt;&lt;a href='#'&gt;SUB MENU&lt;/a&gt;
                  &lt;ul class="sub-menu"&gt;
                     &lt;li&gt;&lt;a href='#'&gt;SUB-SUB MENU&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
               &lt;/li&gt;
            &lt;/ul&gt;
         &lt;/li&gt;
         &lt;li&gt;&lt;a href='#'&gt;MAIN 2&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.sidebar-wrapper {
          width: 250px;
          margin-top: 30px;
      }
  
      .main_nav {
          width: 250px;
          list-style: none;
          padding: 40px 30px 25px 0;
          font-family: Arial;
      }
  
      ul.main_nav {
          padding: 0;
          margin: 0;
          list-style-type: none;
      }
  
      ul.main_nav li {
          list-style-type: none;
      }
  
      ul.main_nav li a {
          background-image: url('../images/acmenu_bg.png');
          background-repeat: repeat-x;
          line-height: 10px;
          padding: 13px 10px;
          display: block;
          text-decoration: none;
          font-size: 13px;
          color: #fff;
          font-weight: bold;
          list-style: none;
      }
  
      ul.main_nav li a:hover {
          /* background-image: url('');  HOVER ?!*/
          color: #ef7b0b;
      }
  
      ul.main_nav ul {
          margin: 0;
          padding: 0;
          display: none;
      }
  
      ul.main_nav ul li {
          margin: 0;
          padding: 0;
          clear: both;
      }
  
      ul.main_nav ul li a {
          background-image: url('../images/acmenu2_bg.png');
          background-repeat: repeat-x;
          padding-left: 20px;
          font-size: 12px;
          font-weight: bold;
      }
  
      ul.main_nav ul li a:hover {
          color: #dcdcdc;
          /* HOVER */
      }
  
      ul.main_nav ul li a:active {
          background-image: url('../images/acmenu1_bg.png');
          background-repeat: repeat-x;
      }
  
      ul.main_nav ul ul li a {
          background: #f6f6f6;
          color: #000;
          padding-left: 40px;
          border-bottom: 1px solid #e7e7e7;
      }
  
      ul.main_nav ul ul li a:hover {
          color: #ef7b0b;
          text-decoration: underline;
      }
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>$(document).ready(function() {
  $('.sidebar-wrapper ul li a').click(function(ev) {
      $('.sidebar-wrapper .sub-menu').not($(this).parents('.sub-menu')).slideUp();
      $(this).next('.sub-menu').slideToggle();
      $('.main_nav ul li a').removeClass('active');
      $(this).addClass('active');
      ev.stopPropagation();
  });
  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/2897W/3/" rel="nofollow" title="example">My accordion menu example jsFiddle</a></p>
  
  <p>As you can see I've tried to write the code as simple as possible. There are 2 things I can't handle with:</p>
  
  <p>1st. ) I made a hover background to my sub-menus (only) - when It's clicked sub-sub menu list is showing - I would like to have only sub-menu items to be hovered (with that orange gradient), not sub-sub menu items, because when you click on sub-sub menu item it takes active state from sub-menu item, remove it and assign for yourself. I have a problem fixing that. ?</p>
  
  <p>2nd. ) It's related to sub sub menu items. I would like to have sub-menu item active (covered with orange gradient background) when I have active sub sub menu item clicked (which is orange underline). One more thing, I'd like it to be always collapsed if sub sub menu item is active.</p>
  
  <p>If something is unclear to you or I wrote something wrong please correct me and do not hesitate to ask for more details.</p>
  
  <p>I would really appreciate for your help.</p>
  
  <p>Thank you. Greetings -
  Chris</p>