Accordion Bootstrap 3

Пример использования стандартного аккордиона Bootstrap 3, показан готовый код HTML вариант сворачивания и разворачивания панелей. Все необходимые стили и скрипты подключены внизу кода

<div class="container">
 <div class="row">
 <div class="col-sm-6 col-sm-offset-3">
 <div id="accordion" class="panel-group">

 <div class="panel panel-default">

 <div class="panel-heading">

 <h4 class="panel-title text-center">

 <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Заголовок 1</a>

 </h4>

 </div>

 <div id="collapseOne" class="panel-collapse collapse in">

 <div class="panel-body">

 <img src="http://drawings-girls.ucoz.net/2015/08/seryoznaya-devushka-s-krasnimi-volosami.jpg" class="img-responsive" alt="Картинка 1" />

 </div>

 </div>

 </div>

 <div class="panel panel-default">

 <div class="panel-heading">

 <h4 class="panel-title text-center">

 <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Заголовок 2</a>

 </h4>

 </div>

 <div id="collapseTwo" class="panel-collapse collapse">

 <div class="panel-body">

 <img src="http://drawings-girls.ucoz.net/2015/08/devushka-v-zelyonom-platie-s-olenem.jpg" class="img-responsive" alt="Картинка 2" />

 </div>

 </div>

 </div>

 <div class="panel panel-default">

 <div class="panel-heading">

 <h4 class="panel-title text-center">

 <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">Заголовок 3</a>

 </h4>

 </div>

 <div id="collapseThree" class="panel-collapse collapse">

 <div class="panel-body">

 <img src="http://drawings-girls.ucoz.net/2015/08/temnovolosaya-devushka-s-sharom-i-zmeyoi.jpg" class="img-responsive" alt="Картинка 3" />

 </div>

 </div>

 </div>

 </div>
 </div>
 </div>
</div>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>