<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>Accordion Bootstrap</title> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link href="/assets/css/bootstrap.css" rel="stylesheet" /> <script src="/assets/js/jquery-2.1.1.min.js"></script> <script src="/assets/js/bootstrap.min.js"></script> </head> <body class="container"> <div class="row"> <div class="col-md-12"> <header> <h1>Accordion Bootstrap</h1> </header> <!--Ваш код--> <div class="panel-group" id="accordion"> <!--Первая секция--> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <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"> <p>Здесь будет находиться содержимое секции 1 аккордиона.</p> </div> </div> </div> <!--/Первая секция--> <!--Вторая секция--> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Название секции 2</a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse"> <div class="panel-body"> <p>Здесь будет находиться содержимое секции 2 аккордиона.</p> </div> </div> </div> <!--/Вторая секция--> <!--Третья секция--> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">Название секции 3</a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse"> <div class="panel-body"> <p>Здесь будет находиться содержимое секции 3 аккордиона.</p> </div> </div> </div> <!--/Третья секция--> </div> <!--/Ваш код--> </div> </div> </body> </html>