liAccordion / accordion
CheckOut
Color templates
Select the desired color
Or set your custom color
Main Layout
Marker Shape
Marker Sign
Marker Position
Color Type
RESULT
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="#"> <strong>Billing Address</strong> </a>
<ul>
<form>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label">First Name</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label">Last 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">Company 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 Address</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">Phone</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">Country</label>
<select class="form-control">
<option value="">Select a country…</option>
<option value="AX">Åland Islands</option>
<option value="AF">Afghanistan</option>
<option value="AL">Albania</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label class="control-label">Address</label>
<input type="text" class="form-control" placeholder="Street address">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<input type="text" class="form-control" placeholder="Apartment, suite, unit etc.">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label class="control-label">Town / City</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">State / County</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">Postcode / Zip</label>
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label><input type="checkbox"> <span>Create an account?</span></label>
</div>
</div>
</div>
<div class="text-right">
<button class="btn btn-success btn-next"> Continue</button>
</div>
</form>
</ul>
</li>
<li><a href="#"> <strong>Shipping Address</strong> </a>
<ul>
<form>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label">First Name</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label">Last 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">Company 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">Country</label>
<select class="form-control">
<option value="">Select a country…</option>
<option value="AX">Åland Islands</option>
<option value="AF">Afghanistan</option>
<option value="AL">Albania</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label class="control-label">Address</label>
<input type="text" class="form-control" placeholder="Street address">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<input type="text" class="form-control" placeholder="Apartment, suite, unit etc.">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label class="control-label">Town / City</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">State / County</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">Postcode / Zip</label>
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="text-right clearfix">
<div class="pull-left"><button class="btn btn-primary btn-prev"> Back</button></div>
<button class="btn btn-success btn-next"> Continue</button>
</div>
</form>
</ul>
</li>
<li><a href="#"><strong>Payment</strong></a>
<ul>
<form>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label><input type="checkbox"> <span>Cheque Payment </span></label>
</div>
</div>
</div>
<div class="text-right">
<div class="pull-left"><button class="btn btn-primary btn-prev"> Back</button></div>
<button class="btn btn-success"> Submit</button>
</div>
</form>
</ul>
</li>
