liAccordion / accordion
Product Filter

Color templates

Select the desired color
Or set your custom color

Main Layout

Marker Shape

Marker Sign

Marker Position

Color Type

RESULT

  • View source

      Include files <head> ...[THIS CODE]... </head>

      <!--If you have already use jquery, then this line is not necessary--> 
      <script src="js/jquery-1.11.1.min.js"></script> 
      
      <!-- Plugins files-->
      <link rel="stylesheet" href="css/liAccordion.css">
      <script src="js/jquery.liAccordion.js"></script> 
      

      Custom CSS <style> ...[THIS CODE]... </style>

      There will be generated CSS

      Plugins Initialization <head> ...[THIS CODE]... </head>

      <!-- Initialization of plugin --> 
      <script>
      $(function(){
      	$('.ini_class').liAccordion();
      	$('.ini_class').liAccordion('expandall');
      })
      </script> 
      

      HTML <body> ...[THIS CODE]... </body>

      <ul class="ini_class" data-colortheme="Pink" data-layout="menu" data-markershape="square" data-markersign="triangle" data-markerpos="left" data-colortype="bg">
      	<li> <a href="#"> <span>Phones &amp; Telecommunications</span> </a>
      		<ul>
      			<li> <a href="#">Mobile Phones</a> <span>(346696)</span>
      				<ul>
      					<li> <a href="#">Mobile Phones</a> <span>(346696)</span> </li>
      					<li> <a href="#">Phone Bags &amp; Cases</a> <span>(14122765)</span> </li>
      					<li> <a href="#">Backup Powers</a> <span>(147439)</span> </li>
      				</ul>
      			</li>
      			<li> <a href="#">Phone Bags &amp; Cases</a> <span>(14122765)</span> </li>
      			<li> <a href="#">Backup Powers</a> <span>(147439)</span> </li>
      		</ul>
      	</li>
      	<li> <a href="#">Function</a>
      		<ul>
      			<li> <a href="#">Waterproof</a> <span>(69740)</span> </li>
      			<li> <a href="#">Dirt-resistant</a> <span>(11721669)</span> </li>
      			<li> <a href="#">Power Case</a> <span>(41850)</span> </li>
      			<li> <a href="#">Water/Dirt/Shock Proof</a> <span>(42836)</span> </li>
      		</ul>
      	</li>
      	<li> <a href="#">Type</a>
      		<ul>
      			<li> <a href="#">Pouch</a> <span>(224663)</span> </li>
      			<li> <a href="#">Bumper</a> <span>(388042)</span> </li>
      		</ul>
      	</li>
      	<li> <a href="#">Compatible Brand</a>
      		<ul>
      			<div class="row">
      				<div class="col-xs-6">
      					<li> <a href="#">Palm</a> </li>
      					<li> <a href="#">Apple iPhones</a> </li>
      					<li> <a href="#">Motorola</a> </li>
      				</div>
      				<div class="col-xs-6">
      					<li> <a href="#">Panasonic</a> </li>
      					<li> <a href="#">Sony</a> </li>
      					<li> <a href="#">LG</a> </li>
      				</div>
      			</div>
      		</ul>
      	</li>
      	<li> <a href="#">Material</a>
      		<ul>
      			<li> <a href="#">Denim</a> <span>(497)</span> </li>
      			<li> <a href="#">Polyester</a> <span>(10961)</span> </li>
      		</ul>
      	</li>
      	<li> <a href="#">Brand Name</a>
      		<ul>
      			<li> <a href="#">BASEUS</a> </li>
      			<li> <a href="#">Nillkin</a> </li>
      			<li> <a href="#">Rock</a> </li>
      		</ul>
      	</li>
      </ul>

Responsive Multi Level Accordion Navigation

DOWNLOAD liAccordion