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
- Phones & Telecommunications
- Mobile Phones (346696)
- Mobile Phones (346696)
- Phone Bags & Cases (14122765)
- Backup Powers (147439)
- Phone Bags & Cases (14122765)
- Backup Powers (147439)
- Mobile Phones (346696)
- Function
- Waterproof (69740)
- Dirt-resistant (11721669)
- Power Case (41850)
- Water/Dirt/Shock Proof (42836)
- Type
- Compatible Brand
- Material
- Brand Name
Include files <head> ...[THIS CODE]... </head>
<!--If you have already use jquery, then this line is not necessary-->
<script src="https://code.jquery.com/jquery-3.5.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 & 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 & Cases</a> <span>(14122765)</span> </li>
<li> <a href="#">Backup Powers</a> <span>(147439)</span> </li>
</ul>
</li>
<li> <a href="#">Phone Bags & 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>
