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

  • Billing Address
  • Shipping Address
  • Payment
  • 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="#"> <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>
      </ul>

Responsive Multi Level Accordion Navigation

DOWNLOAD liAccordion