jQUery Accordion

Accordion

by B L Praveen

HTML

<div class="all-ctg"> 
		<div class="all-ctg-wrapper">
			ALL Categories
			<div class="arrow-dd ">
				<span class="arrow-dd-img fk-inline-block"></span>
			</div>	
		</div>
	</div>
    <nav>
      <ul id="nav">
        <li><a href="#">Animation
            <span class="mega-icon"></span>
            </a>
          <ul>
            <li><a href="http:/www.google.com/search?q=design+cartoons+animation">Cartoons</a></li>
            <li><a href="http:/www.google.com/search?q=design+comic+strips+inspiration">Comic Strips</a></li>
            <li><a href="http:/www.google.com/search?q=how+to+clip+video+footage">Video Clips</a></li>
            <li><a href="http:/www.google.com/search?q=design+create+animated+gifs">Web GIFs</a></li>
          </ul>
        </li>
        <li><a href="#">Graphic Design
				<span class="mega-icon"></span>
			</a>
          <ul>
            <li><a href="http:/www.google.com/search?q=photoshop+tutorials+graphics+design">Adobe Photoshop
                     <span class="mega-icon"></span>
                </a>
                 <ul>
                     <li>
                         <a href="http:/www.google.com/search?q=photoshop+bursh">Photoshop brush</a>
                      <li>
                </ul>
              </li>
            <li><a href="http:/www.google.com/search?q=digital+branding+graphics+logos">Branding &amp; Logos</a></li>
            <li><a href="http:/www.google.com/search?q=graphics+design+marketing">Digital Marketing</a></li>
            <li><a href="http:/www.google.com/search?q=graphic+design+illustrations">Illustrations</a></li>
            <li><a href="http:/www.google.com/search?q=infographics+inspiration">Infographics</a></li>
            <li><a href="http:/www.google.com/search?q=product+design+inspiration">Product Design</a></li>
          </ul>
        </li>
        <li><a href="#">Digital Photography
                <span class="mega-icon"></span>
            </a>
          <ul>
            <li><a...

CSS

#nav a {
    text-decoration: none;
    padding: 5px 10px;
    margin: 0px 15px 0px 0px;
    display: block;
	color:#FFF;
}
/* nav menu styles */
#nav { 
  display: block; 
  width: 280px; 
  margin: 0 auto;
  background: #FAFAFA;
    padding: 5px; 
  padding:0px;
  border:1px solid #888;
  border-top:none;
}

#nav > li > a {
	border-bottom: 1px solid #CCCCCC;
    box-shadow: 0 2px 5px -2px #FFFFFF;
    color: #222222;
    text-shadow: 1px 1px 1px #FFFFFF;	
	margin:0px;
	padding: 10px 20px 10px 10px;
}
#nav > li > a:hover, #nav > li > a.open { 
    		
}

#nav li ul { display: none;     
	padding: 0;
    margin: 0 0 0 0px;}

#nav li ul li a { 
    text-decoration: none;
	color: #222222;
    margin:0px;
    padding:5px 20px 5px 10px;
}
#nav li ul li a:hover {
}
#nav  li  { 
    margin: 2px 5px;
	position:relative;
	list-style-type:none;	
}
#nav  > li  {
	margin:0px;
}
.mega-icon
{
    background: url("http://img6a.flixcart.com/www//prod/images/menu_assets-1c9538a9.png") no-repeat scroll -1px -4px rgba(0, 0, 0, 0);
    right: 5px;
	display: block;
    height: 26px;
    position: absolute;
    top: 6px;
    width: 16px	
}
.all-ctg {
    color: #565656;
    display: block;	
    width: 280px;
	margin: 0 auto;
	background: #FFBB00;	
	border:1px solid #CECECE;
	
}
.all-ctg-wrapper {
    padding: 7px 14px;
    text-transform: uppercase;
	position:relative;
}

.all-ctg-wrapper .arrow-dd {
    border-left: 1px solid #E0BC27;
    border-radius: 0 2px 2px 0;
    box-shadow: -3px 0 5px -3px #FFFFFF;
    height: 32px;
    position: absolute;
    right: 0;
    top: 0;
    width: 36px;
}

.all-ctg-wrapper .arrow-dd .arrow-dd-img {
    background: url("http://img6a.flixcart.com/www//prod/images/menu_assets-1c9538a9.png") no-repeat scroll -1px -4px rgba(0, 0, 0, 0);
    display: inline-block;
    height: 7px;
    left: 11px;
    position: relative;
    top: 6px;
    width: 14px;
}

JavaScript

$(document).ready(function(){
  $("#nav").slideUp(350);  	
  $('.all-ctg-wrapper').on('click',function(e) {
	  $("#nav li ul").slideUp(350);
	  if(!$(this).hasClass("open")) {
		$(this).addClass("open");	
		$("#nav").slideDown(350);	
	  } else {
		$("#nav").slideUp(350);
		$(this).removeClass("open");
	  }
	  
  });
  $("#nav  li  a .mega-icon").on("click", function(e){
    if($(this).parent().has("ul")) {
      e.preventDefault();
    }
    
    if(!$(this).closest('a').hasClass("open")) {
      // hide any open menus and remove all other classes
      $("#nav li ul").not(jQuery(this).parents('ul')).slideUp(350);
      $("#nav li a").not(jQuery(this).parents('li').find('a.open')).removeClass("open");
      
      // open our new menu and add the open class
      $(this).closest('a').next("ul").slideDown(350);
      $(this).closest('a').addClass("open");
    }
    
    else if($(this).closest('a').hasClass("open")) {
      $(this).closest('a').removeClass("open");
      $(this).closest('a').next("ul").slideUp(350);
    }
  });
});