bootstrap collapse

117

31 июля 2019, 10:00

Как сделать, что бы при нажатии на кнопку блок открывался, а другие скрывались?

Добавил data-parent="#block123" , но не срабатывает.

Что я делаю не так?

<div id="block123"> <p><strong>Блоки</strong>
        <button class="btn" style="background-color:#ee5d00;" type="button" data-toggle="collapse" data-target="#collapseExample" data-parent="#block123" aria-expanded="false" aria-controls="collapseExample">
          Блок 1
        </button>
        <button class="btn" style="background-color:#ee5d00;" type="button" data-toggle="collapse" data-target="#collapseExample2" data-parent="#block123" aria-expanded="false" aria-controls="collapseExample2">
          Блок 2
        </button>
        <button class="btn" style="background-color:#ee5d00;" type="button" data-toggle="collapse" data-target="#collapseExample3" data-parent="#block123" aria-expanded="false" aria-controls="collapseExample3">
          Блок 3
        </button>
      </p>
      <div class="collapse show" id="collapseExample">
        <div class="card card-body">
          <p>блок 1</p>
        </div>
      </div>
      <div class="collapse" id="collapseExample2">
        <div class="card card-body">
          <p>блок 2</p>
        </div>
      </div>
      <div class="collapse" id="collapseExample3">
        <div class="card card-body">
          <p>блок 3</p>
        </div>
      </div>

Answer 1

У Вас не понятная структура, больше похоже на табы! Определитесь табы или аккордеон нужен.

Если все же аккордеон:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> 
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> 
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> 
 
<div class="block123" id="accordionExample"> 
 
  <div class="d-flex align-items-center"> 
 
    <strong class="d-block m-2">Блоки</strong> 
 
    <div id="heading1" class="m-2"> 
      <button class="btn" style="background-color:#ee5d00;" type="button" data-toggle="collapse" data-target="#collapseExample1" aria-expanded="true" aria-controls="collapseExample1"> 
          Блок 1 
        </button> 
    </div> 
 
    <div id="heading2" class="m-2"> 
      <button class="btn collapsed" style="background-color:#ee5d00;" type="button" data-toggle="collapse" data-target="#collapseExample2" aria-expanded="false" aria-controls="collapseExample2"> 
          Блок 2 
        </button> 
    </div> 
 
    <div id="heading3" class="m-2"> 
      <button class="btn collapsed" style="background-color:#ee5d00;" type="button" data-toggle="collapse" data-target="#collapseExample3" aria-expanded="false" aria-controls="collapseExample3"> 
          Блок 3 
        </button> 
    </div> 
 
  </div> 
 
  <div class="collapse show" id="collapseExample1" aria-labelledby="heading1" data-parent="#accordionExample"> 
    <div class="card card-body"> 
      <p>блок 1</p> 
    </div> 
  </div> 
  <div class="collapse" id="collapseExample2" aria-labelledby="heading2" data-parent="#accordionExample"> 
    <div class="card card-body"> 
      <p>блок 2</p> 
    </div> 
  </div> 
  <div class="collapse" id="collapseExample3" aria-labelledby="heading3" data-parent="#accordionExample"> 
    <div class="card card-body"> 
      <p>блок 3</p> 
    </div> 
  </div>

Одна из проблем как раз в data-parent="#block123", для кнопок этот атрибут не нужен + parent у Вас с классом block123, а не id="accordionExample".

data-parent="#accordionExample" задается блокам, которые разворачиваются.

Если табы:

.nav-link { 
  background-color:#ee5d00; 
  color:#fff; 
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> 
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> 
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> 
 
<ul class="nav nav-pills mb-3 align-items-center" id="pills-tab" role="tablist"> 
  <strong class="d-blcok m-2">Blocks</strong> 
   
  <li class="nav-item"> 
    <a class="nav-link m-2 active" id="pills-1-tab" data-toggle="pill" href="#pills-1" role="tab" aria-controls="pills-1" aria-selected="true">Block1</a> 
  </li> 
  <li class="nav-item"> 
    <a class="nav-link m-2" id="pills-2-tab" data-toggle="pill" href="#pills-2" role="tab" aria-controls="pills-2" aria-selected="false">Block2</a> 
  </li> 
  <li class="nav-item"> 
    <a class="nav-link m-2" id="pills-3-tab" data-toggle="pill" href="#pills-3" role="tab" aria-controls="pills-3" aria-selected="false">Block3</a> 
  </li> 
</ul> 
<div class="tab-content" id="pills-tabContent"> 
  <div class="tab-pane fade show active" id="pills-1" role="tabpanel" aria-labelledby="pills-1-tab"> 
    <p>Block 1</p> 
  </div> 
  <div class="tab-pane fade" id="pills-2" role="tabpanel" aria-labelledby="pills-2-tab"> 
    <p> 
      Block 2 
    </p> 
  </div> 
  <div class="tab-pane fade" id="pills-3" role="tabpanel" aria-labelledby="pills-3-tab"> 
    <p> 
      Block 3 
    </p> 
  </div> 
</div>

Со стилями уже сами.