Bootstrap4 Collapse

271

22 декабря 2017, 03:16

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

<!doctype html> 
<html lang="en"> 
  <head> 
    <title>Hello, world!</title> 
    <!-- Required meta tags --> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
 
    <!-- Bootstrap CSS --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> 
  </head> 
  <body> 
        <div class="container-fluid  p-0 mx-0 my-3"> 
        <div class="row p-0 m-0"> 
            <div class="w-100 p-0"> 
                 <div class="btn-group btn-block" role="group" aria-label="Basic example"> 
                 <button type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="true" aria-controls="collapseExample" class="btn btn-secondary  btn-sm  fs-text-five"> 
                  Детали 
                 </button> 
                 <button type="button"  data-toggle="collapse" data-target="#collapseExample2" aria-expanded="false" aria-controls="collapseExample2"  class="btn btn-secondary  btn-sm  fs-text-five"> 
                  Особености 
                </button> 
                <button type="button" data-toggle="collapse" data-target="#collapseExample3" aria-expanded="false" aria-controls="collapseExample3" class="btn btn-secondary  btn-sm  fs-text-five"> 
                  Описание 
                </button> 
                <button type="button"  class="btn btn-secondary  btn-sm  fs-text-five"> 
                  Карта 
                </button> 
                 </div> 
            </div> 
        </div> 
      </div> 
<div class="container-fluid "> 
        <div class="row"> 
    <div class="w-100 text-center collapse" id="collapseExample"> 
      <table class="table table-striped"> 
        <tbody> 
          <tr> 
            <td>Mark</td> 
            <td>Otto</td> 
          </tr> 
          <tr> 
            <td>Jacob</td> 
            <td>Thornton</td> 
          </tr> 
          <tr> 
            <td>Larry</td> 
            <td>the Bird</td> 
          </tr> 
        </tbody> 
      </table> 
    </div> 
    <div class="w-100 text-center collapse" id="collapseExample2"> 
      <table class="table table-striped"> 
        <tbody> 
          <tr> 
            <td>Masdvdsrk</td> 
            <td>Otdvsvto</td> 
          </tr> 
          <tr> 
            <td>Jacosdvsdvb</td> 
            <td>Thovsdvrnton</td> 
          </tr> 
          <tr> 
            <td>Larsdvsdry</td> 
            <td>thevsddsv Bird</td> 
          </tr> 
        </tbody> 
      </table> 
    </div> 
    <div class="w-100 text-center collapse" id="collapseExample3"> 
      <p>fvrthrth rhtrthr thrthrt rthtrh trhrthrth</p> 
    </div> 
    </div> 
  </div>   
 
    <!-- Optional JavaScript --> 
    <!-- jQuery first, then Popper.js, then Bootstrap JS --> 
    <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.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script> 
  </body> 
</html>

тоесть без повторных кликов на туже вкладку

Answer 1

Используйте Tabs (почитать можно здесь)

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" /> 
<ul class="nav nav-tabs" id="myTab" role="tablist"> 
  <li class="nav-item"> 
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a> 
  </li> 
  <li class="nav-item"> 
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a> 
  </li> 
  <li class="nav-item"> 
    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a> 
  </li> 
</ul> 
<div class="tab-content" id="myTabContent"> 
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab"> 
    <table class="table table-striped"> 
      <tbody> 
        <tr> 
          <td>Mark</td> 
          <td>Otto</td> 
        </tr> 
        <tr> 
          <td>Jacob</td> 
          <td>Thornton</td> 
        </tr> 
        <tr> 
          <td>Larry</td> 
          <td>the Bird</td> 
        </tr> 
      </tbody> 
    </table> 
  </div> 
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab"> 
    <table class="table table-striped"> 
      <tbody> 
        <tr> 
          <td>Masdvdsrk</td> 
          <td>Otdvsvto</td> 
        </tr> 
        <tr> 
          <td>Jacosdvsdvb</td> 
          <td>Thovsdvrnton</td> 
        </tr> 
        <tr> 
          <td>Larsdvsdry</td> 
          <td>thevsddsv Bird</td> 
        </tr> 
      </tbody> 
    </table> 
  </div> 
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab"> 
    <p>fvrthrth rhtrthr thrthrt rthtrh trhrthrth</p> 
  </div> 
</div> 
 
<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.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Длина массива undefined. NodeJS/Oracle

Пытаюсь привести выгрузку из Oracle в NodeJS к нормальному JSON вида: { "name": "Bob", "age": 21 }

451

javascript

Проблемы с пагинацией

Никак не могу прикрутить пагинацию к этой странице: страница скидок

259

javascript

Как вывести посты из инстаграмма в нескольких местах страницы

Использую скрипт instafeedjs

240

javascript

Как подключить правильно библеотеку materialize-css к webpack?

У меня возник вопрос, почему я не могу никак подключить webpack в эту библиотеку materialize-cssЕсть идея использовать данный модуль materialize-loader

205