Accordion menu

Accordion menu

by Ali Khaled

HTML

<div id="viptables">
  <ul id="accordion">
    <li>
      <h2>N. America</h2>
      <ul>
        <li>United States</li>
        
        <li>Link two</li>
        <li>Link three</li>
        <li>Link four</li>
      </ul>
    </li>
    <li>
      <h2>TAB TWO</h2>
      <ul>
        <li>Link one</li>
        <li>Link two</li>
        <li>Link three</li>
        <li>Link four</li>
      </ul>
    </li>
    <li class="active">
      <h2>TAB THREE</h2>
      <ul>
        <li>Link one</li>
        <li>Link two</li>
        <li>Link three</li>
        <li>Link four</li>
      </ul>
    </li>
    <li>
      <h2>TAB FOUR</h2>
      <ul>
        <li>Link one</li>
        <li>Link two</li>
        <li>Link three</li>
        <li>Link four</li>
      </ul>
    </li>
  </ul>
</div>

CSS

body {background:#A6A6A6;}/*Accordion menu*/
#viptables {
    display: block;
    background:#A6A6A6;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    padding: 0px 0px;
}
#viptables h1 {
    font-family: "FelixTitlingRegular", Arial, Helvetica, sans-serif;
    color: #DFD9C3;
    font-size: 20px;
    text-shadow: 0px 1px 1px #333;
}
#viptables h2 {
    font-family: "FelixTitlingRegular", Arial, Helvetica, sans-serif;
    color:#666;
    font-size: 16px;
    text-shadow: 0px 1px 1px #FFF;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    padding: 4px 8px;
    background: white;
    width:210px;
}
#accordion {
    width:230px;
}
#accordion li {
    cursor: pointer;
    background:#A6A6A6;
    font-weight:bold;
    color:#FFF;
    margin-bottom:2px;
    list-style-image:none;
    list-style-position:outside;
    list-style-type:none;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    padding: 2px 8px;
}
#accordion a {
    display: block;
    padding: 4px 8px;
    width:100px;
    background: #666;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}
#accordion li.active {
    color:red;
}
#accordion li ul {
    padding:0;
    margin:10px 0 0 0;
    background: #A6A6A6;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}
#accordion li.active li {
    text-indent:0;
}
#accordion li li {
    font-weight: normal;
    background:none;
    border:0;
    font-size:11px;
}

JavaScript

$('#viptables ul > li ul')
    .click(function(e){
      e.stopPropagation();
    })
    .filter(':not(:eq(2))')
    .hide();
$("#viptables ul li:first a").addClass("current");
    
  $('#viptables ul > li').click(function(){
    var selfClick = $(this).find('ul:first').is(':visible');
    
    if(!selfClick) {
      $(this)
        .parent()
        .find('> li ul:visible')
        .slideToggle();
    }
   
    $(this)
      .find('ul:first')
      .stop(true, true)
      .slideToggle();
  });  
  ev.preventDefault();