"Accordion(js)"
Bootstrap 4.1.1 Snippet by imsachin

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Page</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"><!--for range slider css--> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link href="css/style.css" rel="stylesheet"> </head> <body> <div class="container result mt10"> <div class="row"> <div class="col-md-3 pad hidden-xs"> <div class="row"> <div id="accordion"> <h3>Section 1 <span class="fa fa"></span></h3> <div class=""> <ul class=""> <li class="active">Direct <p>000.00</p><span class="sr-only">(current)</span></li> <li>1 Stops<p>000.00</p></li> </ul> </div> <h3>Section 2</h3> <div> <p> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox1" value="option1"> 1 </label><span class="pull-right">000.00</span> </p> <p> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox2" value="option1"> 2 </label><span class="pull-right">000.00</span> </p> <p> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox3" value="option1"> 3 </label><span class="pull-right">000.00</span> </p> </div> </div> </div> </div> </div> </div> <script src="js/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script><!--for accordia use js--> <script src="js/bootstrap.min.js"></script> </body> </html>
body{margin:0px;padding:0px;font-family: 'Abril Fatface', cursive;} *{box-sizing: border-box;} .mt10{margin-top:10px;} .result {padding: 10px 0px 10px 0px;} .result ul{padding:0px;margin:0px;} .result ul li {margin: 0px 0px;list-style: none;display: inline-block;background-image: linear-gradient(0deg,#00cadc,#05a3b1,#00cadc,#00cadc);background-color: #00cadc;cursor:pointer;color: #ffffff;padding: 20px 20px;border-right:1px solid #fff;} .result ul li.active {margin: 0px 0px;list-style: none;display: inline-block;background-image: linear-gradient(0deg,#00cadc,#05a3b1,#00cadc,#00cadc);background-color: #00cadc;cursor:pointer;color: #ffffff;padding: 20px 20px;border-right:1px solid #fff;} .result ul li p{margin-bottom:0px;} .result ul li:focus{background:#000;} #accordion .ui-accordion-content{height:auto!important;padding: 25px 10px;} #accordion h3{margin:0px;background: #e7af7c;padding: 15px 15px;cursor:pointer;border-bottom: 1px solid #4c3737;color:#000;} .result-2nd{background:#f1f1f1;padding:10px 0px;} .pad{padding: 0 50px 0px 0px;}
$( function() { $( "#accordion" ).accordion({ collapsible: true }); } );

Related: See More

Paper Dashboard
Tabs and accordion collaboration
Accordion Multi Level List Group Menu
Accordion Menu

Questions / Comments: