Связать ряд кнопок на закрытие\открытие контента Collapse

275
21 ноября 2017, 22:48

Суть вопроса такова:

К примеру, есть Navbar с External Content:

<div class="pos-f-t">
  <div class="collapse" id="navbarToggleExternalContent">
    <div class="bg-dark p-4">
      <h4 class="text-white">Collapsed content</h4>
      <span class="text-muted">Toggleable via the navbar brand.</span>
    </div>
  </div>
  <nav class="navbar navbar-dark bg-dark">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </nav>
</div>

Где кнопка открывает скрытый контент с id="example"

Но если добавить несколько кнопок, где каждая кнопка открывает отдельный контент:

<div class="pos-f-t">
      <div class="collapse" id="navbarToggleExternalContent">
        <div class="bg-dark p-4">
          <h4 class="text-white">Collapsed content</h4>
          <span class="text-muted">Toggleable via the navbar brand.</span>
        </div>
      </div>
      <div class="collapse" id="navbarToggleExternalContent2">
        <div class="bg-dark p-4">
          <h4 class="text-white">Collapsed content 2</h4>
          <span class="text-muted">Toggleable via the navbar brand 2</span>
        </div>
      </div>
      <nav class="navbar navbar-dark bg-dark">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent2" aria-controls="navbarToggleExternalContent2" aria-expanded="false" aria-label="Toggle navigation2">
          <span class="navbar-toggler-icon"></span>
        </button>
      </nav>
</div>

То при последовательном нажатии кнопок скрытый контент будет раскрыт в этом же порядке.

Мне нужно чтобы, к примеру, при нажатии на Button1 открывался скрытый контент но если нажать на Button2 предыдущий контент с Button1 скрывался и открывался контент с Button2. При этом не было никакой порядковой связи, например, после нажатия Button5 скрывался контент Button2 и открывался контент Button5.

Я знаю что есть параметры data-parent и data-child но как работают и что связывают понятия не имею.

Answer 1

Как вариант, можете реализовать через Accordion:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> 
<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> 
<div id="accordion" role="tablist" aria-multiselectable="true"> 
  <div class="pos-f-t"> 
    <div class="collapse" id="navbarToggleExternalContent"> 
      <div class="bg-dark p-4"> 
        <h4 class="text-white">Collapsed content</h4> 
        <span class="text-muted">Toggleable via the navbar brand.</span> 
      </div> 
    </div> 
    <div class="collapse" id="navbarToggleExternalContent2"> 
      <div class="bg-dark p-4"> 
        <h4 class="text-white">Collapsed content 2</h4> 
        <span class="text-muted">Toggleable via the navbar brand 2</span> 
      </div> 
    </div> 
    <nav class="navbar navbar-dark bg-dark"> 
      <button data-parent="#accordion" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation"> 
          <span class="navbar-toggler-icon"></span> 
        </button> 
      <button data-parent="#accordion" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent2" aria-controls="navbarToggleExternalContent2" aria-expanded="false" aria-label="Toggle navigation2"> 
          <span class="navbar-toggler-icon"></span> 
        </button> 
    </nav> 
  </div> 
</div>

READ ALSO
Эффект поднятия текста

Эффект поднятия текста

Как добавить эффект поднятия текста при наведении на него курсора?

333
Обернуть подстроки в HTML теги, Python

Обернуть подстроки в HTML теги, Python

Как я могу обернуть подстроки в строке в Python, в необходимые HTML теги, к примеру, есть строка:

215