liAccordion / accordion
Product Info
Color templates
Select the desired color
Or set your custom color
Main Layout
Marker Shape
Marker Sign
Marker Position
Color Type
RESULT
- Description
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
Sean commodo ligula eget dolor. Aenean massa. CuLorem is dis parturient montes, nascetur ridiculus mus.
Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vpsum dolor sit amet, consectetuer adipiscing elit. Aenm sociis natoque penatibus et magniulputate eget, arcu. - Additional information
Size: One size fits all
Colors Comes in grey
Material 100% Pure New Fleece Wool
Other Cable Knit Construction and Made In Italy
Weight N/A
- Reviews (1)
admin – August 16, 2013:
Fantastic product from End Clothing!
Add a review
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();
})
</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 class="cur" href="#"><span class="glyphicon glyphicon-menu-hamburger"></span> Description</a>
<ul>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
<p>Sean commodo ligula eget dolor. Aenean massa. CuLorem is dis parturient montes, nascetur ridiculus mus.<br>
Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vpsum dolor sit amet, consectetuer adipiscing elit. Aenm sociis natoque penatibus et magniulputate eget, arcu.</p>
</ul>
</li>
<li><a href="#"><span class="glyphicon glyphicon-tags"></span> Additional information</a>
<ul>
<table class="" width="100%">
<tbody>
<tr class="">
<td>Size:</td>
<td><p>One size fits all</p></td>
</tr>
<tr class="alt">
<td>Colors</td>
<td><p>Comes in grey</p></td>
</tr>
<tr class="">
<td>Material</td>
<td><p>100% Pure New Fleece Wool</p></td>
</tr>
<tr class="alt">
<td>Other</td>
<td><p>Cable Knit Construction and Made In Italy</p></td>
</tr>
<tr class="">
<td>Weight</td>
<td><p>N/A</p></td>
</tr>
</tbody>
</table>
</ul>
</li>
<li><a href="#"><span class="glyphicon glyphicon-comment"></span> Reviews (1)</a>
<ul class="reviewsWrap">
<div class="reviewsItemWrap">
<div class="reviewsItem"> <img src="pic/logo.png" class="reviewsItemAva">
<div class="reviewsItemCont">
<div class="reviewsItemInfo"><b>admin</b> – August 16, 2013:</div>
<p>Fantastic product from End Clothing!</p>
</div>
</div>
</div>
<div>
<h2>Add a review</h2>
<form>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label class="control-label">Name</label>
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label class="control-label">Email</label>
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label class="control-label">Your Review</label>
<textarea class="form-control" rows="5"></textarea>
</div>
</div>
</div>
<div class="text-right">
<button class="btn btn-success"> Submit</button>
</div>
</form>
</div>
</ul>
</li>
