July 25, 2021

Bootstrap collapse

<div class="container mt-5">
        <div class="question-collapse col-md-6">
                            <div id="accordion">
                              <div class="card">
                                <div class="card-header" id="headingOne">
                                  <h5 class="mb-0">
                                    <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                                      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                                    </button>
                                  </h5>
                                </div>

                                <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion" style="">
                                  <div class="card-body">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
                                  </div>
                                </div>
                              </div>
                              <div class="card">
                                <div class="card-header" id="headingTwo">
                                  <h5 class="mb-0">
                                    <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                      In imperdiet nisl eget mattis facilisis.
                                    </button>
                                  </h5>
                                </div>
                                <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion" style="">
                                  <div class="card-body">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam ducimus, incidunt cumque autem dolore  !</p>
                                  </div>
                                </div>
                              </div>
                              <div class="card">
                                <div class="card-header" id="headingThree">
                                  <h5 class="mb-0">
                                    <button class="btn btn-link" data-toggle="collapse" data-target="#collapseThree" aria-expanded="true" aria-controls="collapseThree">
                                      Sed et elit a lacus finibus mollis.
                                    </button>
                                  </h5>
                                </div>
                                <div id="collapseThree" class="collapse show" aria-labelledby="headingThree" data-parent="#accordion" style="">
                                  <div class="card-body">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident tempora inventore doloremque quia perferendis, esse neque nesciunt nam pariatur doloribus accusantium suscipit repudiandae. Sunt dolorum ad sit alias eaque placeat.</p>
                                  </div>
                                </div>
                              </div>
                              <div class="card">
                                <div class="card-header" id="headingFour">
                                  <h5 class="mb-0">
                                    <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
                                      Donec porttitor nisl sit amet velit semper cursus.
                                    </button>
                                  </h5>
                                </div>
                                <div id="collapseFour" class="collapse" aria-labelledby="headingFour" data-parent="#accordion">
                                  <div class="card-body">
                                    <p> Provident tempora inventore doloremque quia perferendis, esse neque nesciunt nam pariatur doloribus accusantium suscipit repudiandae. Sunt dolorum ad sit alias eaque placeat.</p>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
    </div>

 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        .question-collapse {}
.question-collapse .card {
  border-radius: 0;
  margin-bottom: 46px;
  border-bottom: 0;
  border: none;
}
.question-collapse .card:last-child{margin-bottom:0;}
.question-collapse .card-body {
  padding: 19px 0 0 0;
}
.question-collapse .card-header {
  border-bottom: 1px solid #e3e3e3;
}
.question-collapse .card .card-header {
  padding: 0;
  background-color: inherit;
  position: relative;
}
.question-collapse .card .card-header .btn.btn-link {
  padding: 0;
}

.question-collapse .card .card-body > p {
  line-height: 30px;
  margin-bottom: 0;
  color: #7b7b7b;
  font-size: 16px;
}
.question-wrapper .card .card-body > p {
  line-height: 26px;
  margin-bottom: 0;
  color: #adadad;
}
.question-collapse .card .card-header h5 .btn.btn-link {
  font-size: 14px;
  font-weight: 600;
  color: #2d2e32;
  text-decoration: none;
  line-height: 1;
  background: none;
  text-transform: none;
  width: 100%;
  text-align: left;
  font-family: 'Open Sans', sans-serif;
  padding-bottom: 17px;
}
.question-collapse .card .card-header .btn.btn-link::before {
  position: absolute;
  content: "f068";
  top: -1px;
  right: 0;
  bottom: 0;
  margin: auto;
  font-family:"FontAwesome";
  color: #b7b7b7;
  font-size:16px;
}

.question-collapse .card .card-header .btn.btn-link.collapsed::before {
  position: absolute;
  content: "f067";
  top: -1px;
  right: 0;
  bottom: 0;
  margin: auto;
  font-family:"FontAwesome";
  color:#b7b7b7;
  font-size:16px;
}
    </style>

 

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

 

Leave a Reply

Your email address will not be published. Required fields are marked *