Skip to content

Instantly share code, notes, and snippets.

@imamuddinwp

imamuddinwp/Bootstrap-4-Accordion.html

Created September 30, 2019 12:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save imamuddinwp/5a03b30ac6316c4de9bae96e96305a71 to your computer and use it in GitHub Desktop.
Save imamuddinwp/5a03b30ac6316c4de9bae96e96305a71 to your computer and use it in GitHub Desktop.
Download ZIP
Bootstrap 4 Collapse | Accordion. Imam Uddin, imamcu07
Raw
Bootstrap-4-Accordion.html
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<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>
</head>
<body>
<h1 class="display-1 text-center">Bootstrap Collapse Accordion!!!</h1>
<div class="container">
<!-- COLLAPSE -->
<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>
<!-- Accordion -->
<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>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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>
<script src="https://kit.fontawesome.com/73a99dd79c.js" crossorigin="anonymous"></script>
</body>
</html>
@imamuddinwp
Copy link
Author

Codepan Link

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment