Multiple Accordion with bootstrap

by Rayudu Ikkurthi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
	<div class="panel panel-default">
		<div class="panel-heading" role="tab" id="headingOne">
			<h4 class="panel-title">
				<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
					Collapsible Group Item #1
				</a>
			</h4>
		</div>
		<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
			<div class="panel-body">
				<div class="panel-group" id="accordion1" role="tablist" aria-multiselectable="true">
					<div class="panel panel-default">
						<div class="panel-heading" role="tab" id="headingOneOne">
							<h4 class="panel-title">
								<a role="button" data-toggle="collapse" data-parent="#accordion1" href="#collapseOneOne" aria-expanded="true" aria-controls="collapseOne">
									Collapsible Group Item #1-1
								</a>
							</h4>
						</div>
						<div id="collapseOneOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOneOne">
							<div class="panel-body">
								<div class="panel-group" id="accordion1-2" role="tablist" aria-multiselectable="true">
									<div class="panel panel-default">
										<div class="panel-heading" role="tab" id="headingOneOne">
											<h4 class="panel-title">
												<a role="button" data-toggle="collapse" data-parent="#accordion1-2" href="#collapseOneOneOne" aria-expanded="true" aria-controls="collapseOne">
													Collapsible Group Item #1-1-1
												</a>
											</h4>
										</div>
										<div id="collapseOneOneOne" class="panel-collapse collapse" role="tabpanel"...

CSS

.panel-body{
  padding:0px;
}
.panel-group{
  margin-bottom:0;
}
.panel{
  border:0;
}
.panel-default>.panel-heading{
  border-bottom:1px solid red;
}
.panel-body > .panel-group{
  padding-left:15px;
}