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

  • 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();
      })
      </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>
      </ul>

Responsive Multi Level Accordion Navigation

DOWNLOAD liAccordion