Дисплей рухнет Bootstrap по одному

Question

У меня в настоящее время есть некоторые проблемы с коллапсом Bootstrap, так как я хочу, чтобы он показывал только один div за один раз.Тем не менее, теперь он просто отображает все три, когда я нажимаю на них.Я хочу иметь возможность нажать одну кнопку и скрыть другие, если они открыты.Как я могу это сделать?

Это мой код:

 <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
            <div class="btn-group btn-group-lg m-auto mt-5" role="group" aria-label="First group">
              <button type="button" class="btn active btn-secondary" data-toggle="collapse" data-target="#collapseInformation" aria-expanded="false" aria-controls="collapseInformation"><span class="content">Go one</span></button>
              <button type="button" class="btn btn-secondary" data-toggle="collapse" data-target="#collapseCampus" aria-expanded="false" aria-controls="collapseCampus"><span class="content">Go two</span></button>
              <button type="button" class="btn btn-secondary" data-toggle="collapse" href="#collapseNearby" role="button" aria-expanded="false" aria-controls="collapseNearby"><span class="content">Go three</span></button>
            </div>
          </div>




<div id="accordion" role="tablist">
          <div class="collapse-information collapse show w-75 m-auto" role="tab" id="collapseInformation">
              <div class="card card-body">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam congue laoreet quam, eu convallis tortor condimentum nec. Pellentesque sed felis id ex pellentesque ultrices. Aenean in tempor lorem, eu porta enim. Aliquam erat volutpat. Nulla sit amet congue dolor, id porta urna. Suspendisse vel libero eleifend, accumsan nunc id, vulputate ligula. Nunc eleifend dictum velit, vel euismod augue pretium et.

                  Proin rhoncus odio eleifend finibus mattis. Morbi purus odio, aliquam non augue quis, viverra iaculis velit. Fusce dictum elit vel venenatis posuere. Donec nisl nibh, semper vel lacus et, facilisis tempor velit. Proin ullamcorper, diam ac lobortis venenatis, lorem lectus dapibus nulla, eget dapibus leo ex ut leo. Suspendisse sed nisl sollicitudin, vulputate ipsum a, commodo tortor. In bibendum placerat nibh non congue. Curabitur condimentum dolor turpis, vel pharetra dui egestas a. Integer consequat accumsan rutrum. Morbi et felis quam. Sed suscipit placerat dolor, nec vulputate dolor. Maecenas porta ex ut arcu mattis, sit amet convallis urna scelerisque.</div>
          </div>

          <div class="collapse-campus collapse w-75 m-auto" role="tab" id="collapseCampus">
              <div class="card card-body">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
              </div>
          </div>

          <div class="collapse-nearby collapse w-75 m-auto" role="tab" id="collapseNearby">
              <div class="card card-body">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
              </div>
          </div>
        </div>

Помощь будет принята с благодарностью.

Answer 1

это просто вопрос, просто используйте data-parent = "# accordion" в вашем html

Вы можете попробовать этот код здесь ..

или попробуйте в jsfiddle demo

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">



 <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
            <div class="btn-group btn-group-lg m-auto mt-5" role="group" aria-label="First group">
              <button type="button" class="btn active btn-secondary" data-toggle="collapse" data-target="#collapseInformation" aria-expanded="false" aria-controls="collapseInformation"><span class="content">Go one</span></button>
              <button type="button" class="btn btn-secondary" data-toggle="collapse" data-target="#collapseCampus" aria-expanded="false" aria-controls="collapseCampus"><span class="content">Go two</span></button>
              <button type="button" class="btn btn-secondary" data-toggle="collapse" href="#collapseNearby" role="button" aria-expanded="false" aria-controls="collapseNearby"><span class="content">Go three</span></button>
            </div>
          </div>




<div id="accordion" role="tablist">
          <div class="collapse-information collapse show w-75 m-auto" role="tab" id="collapseInformation" data-parent="#accordion">
              <div class="card card-body">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam congue laoreet quam, eu convallis tortor condimentum nec. Pellentesque sed felis id ex pellentesque ultrices. Aenean in tempor lorem, eu porta enim. Aliquam erat volutpat. Nulla sit amet congue dolor, id porta urna. Suspendisse vel libero eleifend, accumsan nunc id, vulputate ligula. Nunc eleifend dictum velit, vel euismod augue pretium et.

                  Proin rhoncus odio eleifend finibus mattis. Morbi purus odio, aliquam non augue quis, viverra iaculis velit. Fusce dictum elit vel venenatis posuere. Donec nisl nibh, semper vel lacus et, facilisis tempor velit. Proin ullamcorper, diam ac lobortis venenatis, lorem lectus dapibus nulla, eget dapibus leo ex ut leo. Suspendisse sed nisl sollicitudin, vulputate ipsum a, commodo tortor. In bibendum placerat nibh non congue. Curabitur condimentum dolor turpis, vel pharetra dui egestas a. Integer consequat accumsan rutrum. Morbi et felis quam. Sed suscipit placerat dolor, nec vulputate dolor. Maecenas porta ex ut arcu mattis, sit amet convallis urna scelerisque.</div>
          </div>

          <div class="collapse-campus collapse w-75 m-auto" role="tab" id="collapseCampus" data-parent="#accordion">
              <div class="card card-body">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
              </div>
          </div>

          <div class="collapse-nearby collapse w-75 m-auto" role="tab" id="collapseNearby" data-parent="#accordion">
              <div class="card card-body">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
              </div>
          </div>
        </div>