<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 ---------->
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta name="Keywords" content="Html, Bootstrap4">
</head>
<body>
<div class="container">
<br />
<h2>Accordion collapse & Badges Example</h2>
<br />
<div id="accordion">
<div class="card">
<div class="card-header">
<a class="card-link" data-toggle="collapse" href="#collapseOne">
Item no. 1 <span class="badge badge-info">Fixed Item</span>
</a>
</div>
<div id="collapseOne" class="collapse" data-parent="#accordion">
<div class="card-body">
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 laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo">
Item no. 2 <span class="badge badge-success">Complete Item</span>
</a>
</div>
<div id="collapseTwo" class="collapse" data-parent="#accordion">
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris condimentum sollicitudin orci vitae gravida. In iaculis aliquam nibh eu aliquam. Sed vestibulum lectus nulla, non consectetur lacus imperdiet a. Vestibulum vel odio in sem ornare gravida. Donec sed convallis ipsum. Proin rhoncus scelerisque maximus. Proin efficitur odio erat, nec luctus sem luctus venenatis. Morbi eros quam, blandit non eros et, eleifend efficitur libero. Pellentesque convallis sapien nec vulputate cursus. Duis sodales leo sed elit venenatis malesuada. Pellentesque iaculis mi quis dignissim aliquet. Donec consequat, nisl sit amet ultrices eleifend, diam odio consequat nisi, non dictum sapien urna in odio. Etiam at congue nisl, in aliquet quam. Fusce vel convallis ligula, quis dictum magna. Vestibulum suscipit cursus lobortis. Integer tempus pulvinar eros ac iaculis.</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed card-link" data-toggle="collapse" href="#collapseThree">
Item no. 3 <span class="badge badge-primary">New Item</span>
</a>
</div>
<div id="collapseThree" class="collapse" data-parent="#accordion">
<div class="card-body">
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 laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</div>
</div>
</div>
</body>
</html>
