<!doctype html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<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">
<title>Bootstrap Collapse Accordion</title>
<style>
.card-header a {
display: block;
position: relative;
}
.card-header a:after {
content: "\f06e";
font-family: 'FontAwesome';
position: absolute;
right: 0;
}
.card-header a[aria-expanded="true"]:after {
content: "\f410";
}
</style>
Bootstrap Collapse Accordion!!!
<button class="btn btn-primary mb-4" data-target="#collaps-1" data-toggle="collapse">Read More</button>
<div class="collapse show " id="collaps-1">
<div class="card">
<div class="card-body">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit repellendus placeat cumque nesciunt laborum ab cupiditate a laudantium, deserunt vero odit provident ratione voluptas unde? Quidem officiis eius obcaecati perferendis, fugit dolor eveniet sed fuga magni? Hic earum dolore ut natus, velit dicta totam possimus. Laborum eius quaerat porro quam in sit temporibus illo? Incidunt quaerat nostrum, magnam facilis laudantium deleniti inventore quod odio ipsam exercitationem perferendis neque ea minima architecto totam provident. Itaque, sed repellat, ad atque consequatur dignissimos magnam maiores aliquam molestias perferendis velit veniam iste laudantium, vel corrupti eveniet modi aliquid ipsa voluptatem! Sequi deleniti aliquam vel!</p>
</div>
</div>
</div>
<div id="accordion" role="tablist">
<div class=" card m-1">
<div class="card-header " role="tab">
<h5 class="mb-0">
<a data-toggle="collapse" href="#section-1" class="text-decoration-none">Section 1 </a>
</h5>
</div>
<div class="collapse " id="section-1" data-parent="#accordion">
<div class="card-body">
<p >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolor et corporis perspiciatis culpa quos aspernatur maxime iste repellat delectus, error officiis necessitatibus soluta eius quas labore fugiat nulla aliquam saepe.</p>
</div>
</div>
</div>
<div class="card m-1">
<div class="card-header" role="tab">
<h5 class="mb-0">
<a data-toggle="collapse" href="#section-2" class="text-decoration-none" >Section 2 </a>
</h5>
</div>
<div class="collapse " id="section-2" data-parent="#accordion">
<div class="card-body">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolor et corporis perspiciatis culpa quos aspernatur maxime iste repellat delectus, error officiis necessitatibus soluta eius quas labore fugiat nulla aliquam saepe.</p>
</div>
</div>
</div>
<div class="card m-1 ">
<div class="card-header" role="tab">
<h5 class="mb-0">
<a data-toggle="collapse" class="text-decoration-none" href="#section-3">Section 3 </a>
</h5>
</div>
<div class="collapse " id="section-3" data-parent="#accordion">
<div class="card-body">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolor et corporis perspiciatis culpa quos aspernatur maxime iste repellat delectus, error officiis necessitatibus soluta eius quas labore fugiat nulla aliquam saepe.</p>
</div>
</div>
</div>
<div class="card m-1 ">
<div class="card-header" role="tab">
<h5 class="mb-0">
<a data-toggle="collapse" class="text-decoration-none" href="#section-4">Section 4 </a>
</h5>
</div>
<div class="collapse " id="section-4" data-parent="#accordion">
<div class="card-body">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolor et corporis perspiciatis culpa quos aspernatur maxime iste repellat delectus, error officiis necessitatibus soluta eius quas labore fugiat nulla aliquam saepe.</p>
</div>
</div>
</div>
</div>
<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>
Top comments (0)