I've tried all the answers posted previously on same type of question. Basically i want these two buttons two be in a line and only one of them should collapse at a time.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div id="accordion">
<a type="button" class="btn btn-danger" href="#sample1" data-toggle="collapse" aria-controls="sample1" data-parent="#accordion">Sample 1</a>
<a type="button" class="btn btn-danger" href="#sample2" data-toggle="collapse" aria-controls="sample2" data-parent="#accordion">Sample 2</a>
<div class="accordion-group">
<div class="collapse" id="sample1">
<h1> here comes the sample1</h1>
</div>
<div class="collapse" id="sample2">
<h1> here comes the sample2</h1>
</div>
</div>
</div>