Bootstrap Snippet Accordion(js) using HTML CSS Bootstrap Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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;}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
$( function() {
    $( "#accordion" ).accordion({
      collapsible: true
    });
  } );
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Accordion(js)"
Bootstrap 4.1.1 Snippet by imsachin

Related: See More

Questions / Comments:

"Accordion(js)" Bootstrap 4.1.1 Snippet by imsachin

Related: See More

Questions / Comments:

"Accordion(js)"
Bootstrap 4.1.1 Snippet by imsachin