Кнопки радио Bootstrap Переключают Свернуть, но остаются открытыми при повторном нажатии - PullRequest
Новая
       5

Кнопки радио Bootstrap Переключают Свернуть, но остаются открытыми при повторном нажатии

0 голосов
/ 01 февраля 2019

Существует ли чистый способ сохранить открытые свернутые панели в режиме HTML, когда выбрана кнопка-переключатель?Каждый найденный мной пример позволяет вновь закрыть открытую панель при повторном нажатии на ту же кнопку открытия.

Я бы хотел, чтобы свернутая панель говорила видимой при повторном нажатии переключающей кнопки.

Примеры закрытия открытой панели при многократном нажатии: https://codepen.io/martinkrulltott/pen/waRXgw

https://www.bootply.com/U8J7eJh3O6

1 Ответ

0 голосов
/ 01 февраля 2019

Вы можете попробовать что-то вроде этого.После того, как вы получите желаемую функциональность, вы можете создавать стили с помощью компонентов начальной загрузки.

HTML: 

<form>
  Display Panel:
  <input type="radio" name="portion_selection" value="button_one" /> Yes
  <input type="radio" name="portion_selection" value="button_two" /> No
  <div id="portion_one" style="display:none">
    <div class="card">
      <div class="card-body">
        1. This is some text within a card body.
      </div>
    </div>
  </div>
  <div id="portion_two" style="display:none">
    <div class="card">
      <div class="card-body">
        2. This is some text within a card body.
      </div>
    </div>
  </div>
</form>

JS: 

$("input[name='portion_selection']:radio")
    .change(function() {
      $("#portion_one").toggle($(this).val() == "button_one");
      $("#portion_two").toggle($(this).val() == "button_two"); });

Пример Codepen: https://codepen.io/brooksrelyt/pen/GzWzOv

...