liAccordion / accordion
Last News

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({
      		onlyOne:false	
      	});
      })
      </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="#">
      			<img src="pic/logo.png" class="lastNewsThumb">
      			<div class="lastNewsCont">
      				<div class="lastNewsItemInfo"><i>By <b>Stephen BrockIn</b> Business, Design Posted May 24, 2013</i></div>
      				<h5>CURABITUR AC NEQUE AT ARCU</h5>
      			</div>
      		</a>
      		<ul>
      			<p>Mauris sed mauris bibendum est imperdiet porttitor tincidunt at lorem. Pendisse blandit ligula turpis, ac convallis risus fermentum non. Duis vestibulum quis quam vel accumsan. Nunc a vulputate lectus. Vestibulum eleifend nisl sed massa sagittis vestibulum. Vestibulum pretium blandit tellus ...</p>
      			<div class="text-right"><button class="btn btn-default" href="#">Read More</button></div>
      		</ul>
      	</li>
      	<li>
      		<a href="#">
      			<img src="pic/logo.png" class="lastNewsThumb">
      			<div class="lastNewsCont">
      				<div class="lastNewsItemInfo"><i>By <b>Stephen BrockIn</b> Business, Design Posted May 24, 2013</i></div>
      				<h5>CURABITUR AC NEQUE AT ARCU</h5>
      			</div>
      		</a>
      		<ul>
      			<p>Mauris sed mauris bibendum est imperdiet porttitor tincidunt at lorem. Pendisse blandit ligula turpis, ac convallis risus fermentum non. Duis vestibulum quis quam vel accumsan. Nunc a vulputate lectus. Vestibulum eleifend nisl sed massa sagittis vestibulum. Vestibulum pretium blandit tellus ...</p>
      			<div class="text-right"><button class="btn btn-default" href="#">Read More</button></div>
      		</ul>
      	</li>
      	<li>
      		<a href="#">
      			<img src="pic/logo.png" class="lastNewsThumb">
      			<div class="lastNewsCont">
      				<div class="lastNewsItemInfo"><i>By <b>Stephen BrockIn</b> Business, Design Posted May 24, 2013</i></div>
      				<h5>CURABITUR AC NEQUE AT ARCU</h5>
      			</div>
      		</a>
      		<ul>
      			<p>Mauris sed mauris bibendum est imperdiet porttitor tincidunt at lorem. Pendisse blandit ligula turpis, ac convallis risus fermentum non. Duis vestibulum quis quam vel accumsan. Nunc a vulputate lectus. Vestibulum eleifend nisl sed massa sagittis vestibulum. Vestibulum pretium blandit tellus ...</p>
      			<div class="text-right"><button class="btn btn-default" href="#">Read More</button></div>
      		</ul>
      	</li>
      </ul>

Responsive Multi Level Accordion Navigation

DOWNLOAD liAccordion