Как сделать самозакрывающийся collapse в bootstrap?

Question

[Сергей Еремин]

Что-то не получается сделать так, чтобы элемент управления collapse находился внутри самого блока collapse и управлял раскрытием соседнего collapse и схлопыванием самого себя. Вроде все правильно делаю и почти получается, но схлопывание блока получается только через внешний collapse, а через внутренний -- нет:

<form>

   <input type="text" class="form-control" id="login" placeholder="login" />

   <DiV id="collapse_VHOD" class="collapse in" aria-expanded="true">
      <input type="password" class="form-control" id="pwd" />

      <button type="submit" class="btn btn-primary btn-sm">Войти</button>
      <a href="#collapse_REG"
         data-toggle="collapse"
         aria-controls="#collapse_REG"
         data-target="#collapse_REG">Регистрация</a>
      <a href="#collapse_VOSTANOVIT"
         data-toggle="collapse"
         aria-controls="#collapse_VOSTANOVIT"
         data-target="#collapse_VOSTANOVIT">Воcстановить пароль</a>
   </DiV>

   <DiV id="collapse_VOSTANOVIT" class="collapse" aria-expanded="false">
      <input type="text" class="form-control" id="capca" placeholder="CAPCHA" />

      <button type="submit" class="btn btn-primary btn-sm">Восстановить пароль</button>
      <a href="#collapse_REG"
         data-toggle="collapse"
         aria-controls="#collapse_REG"
         data-target="#collapse_REG">Регистрация</a>
      <a href="#collapse_VHOD"
         data-toggle="collapse"
         aria-controls="#collapse_VHOD"
         data-target="#collapse_VHOD">Войти</a>
   </DiV>

    <DiV id="collapse_REG" class="collapse" aria-expanded="false">
      <input type="email" class="form-control" id="email" placeholder="[e-mail]" />

      <button type="submit" class="btn btn-primary btn-sm">Регистрация</button>
      <a href="#collapse_VHOD"
         data-toggle="collapse"
         aria-controls="#collapse_VHOD"
         data-target="#collapse_VHOD">Войти</a>
      <a href="#collapse_VOSTANOVIT"
         data-toggle="collapse"
         aria-controls="#collapse_VOSTANOVIT"
         data-target="#collapse_VOSTANOVIT">Воcстановить пароль</a>
   </DiV>

</form>

Идея в том, что в форме логирования, если кликнуть "Восстановить пароль" скроется поле LOGIN и появится поле CAPCHA... при этом, само-собой, надо заменить и кнопки формы...

Answer 1

[Сергей Еремин]

Пока вопрос решился добавлением:
$('#id_коллапсатора').collapse('hide')"
для каждого collapse делается свой id. Формируются JavaScript-функции для установки каждого блока в collapse в состояние нужное для каждого управляющего этими collapse элемента. Эти функции вызываются по onclick для каждого управляющего элемента.

P.S. Если нужно чтобы некоторые collapse управлялись с нескольких управляющих элементов, то надо отказаться от class="in". Инициализировать исходное состояние всех collapse нужно вызовом соответствующей ему JavaScrip-функции. Почему-то вызов надо сделать дважды, иначе исходное состояние не устанавливается.

Пример:

<script type="text/javascript">
function in_ntr(){ // колапсаторы для раздела ВОЙТИ
  $('#ili').collapse('hide');
  $('#mail').collapse('hide');
  $('#pwd1').collapse('show');
  $('#pwd2').collapse('hide');
  $('#capt').collapse('hide');
  $('#b_vost').collapse('hide');
  $('#b_reg').collapse('hide');
  $('#b_vhod').collapse('show');
}
function in_reg(){ // колапсаторы для раздела РЕГИСТРАИЦЯ
  $('#ili').collapse('hide');
  $('#mail').collapse('show');
  $('#pwd1').collapse('show');
  $('#pwd2').collapse('show');
  $('#capt').collapse('hide');
  $('#b_vhod').collapse('hide');
  $('#b_vost').collapse('hide');
  $('#b_reg').collapse('show');
}
function in_vost(){ // колапсаторы для раздела ВОССТАНОВИТЬ ПАРОЛЬ
  $('#ili').collapse('show');
  $('#mail').collapse('show');
  $('#pwd1').collapse('hide');
  $('#pwd2').collapse('hide');
  $('#capt').collapse('show');
  $('#b_vhod').collapse('hide');
  $('#b_reg').collapse('hide');
  $('#captcha').load('captcha.html'); // подгрузить GOOGLE CAPTCHA
  $('#b_vost').collapse('show');
}
$(document).ready(function(){
  in_ntr(); // установить колапсаторы в исходное состояние, раздел ВОЙТИ
})
</script>

<form id="login-logout-form">
  <div class="input-group">
    <div class="input-group-addon"><span class="glyphicon glyphicon-user"></span></div>
    <input type="text" class="form-control" id="login" placeholder="login" />
   </div>

   <dIV class="collapse" id="ili">
      <small class="input-group">или<br/></small>
    </dIV>

    <dIV class="collapse" id="mail">
      <div class="input-group">
        <div class="input-group-addon">@</div>
        <input type="email" class="form-control" id="email" placeholder="[e-mail]" />
      </div>
    </dIV>

    <dIV class="collapse" id="pwd1">
      <div class="input-group">
        <div class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></div>
        <input type="password" class="form-control" id="pwd_main" placeholder="passport" />
      </div>
    </dIV>

    <dIV class="collapse" id="pwd2">
      <div class="input-group">
        <div class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></div>
        <input type="password" class="form-control" id="pwd_rep" placeholder="повторите passport" />
      </div>
    </dIV>

    <dIV class="collapse" id="capt">
      <div class="input-group" id="captcha"><!---по onclick="$('#capcha').load('capcha');" погрузиться каптча ---></div>
    </dIV>

    <dIV class="collapse" id="b_vhod">
      <div class="input-group"><nobr>
        <button type="submit" class="btn btn-primary btn-sm">Войти</button>
        <small>
          <a href="#" data-toggle="collapse" data-target="#b_reg" onclick="in_reg()">Регистрация</a>
          <a href="#" data-toggle="collapse" data-target="#b_vost" onclick="in_vost()">Воcстановить пароль</a>
        </small>
       </nobr></div>
    </dIV>

    <dIV class="collapse" id="b_vost">
      <div class="input-group"><nobr>
        <button type="submit" class="btn btn-primary btn-sm">Восстановить пароль</button>
          <small>
            <a href="#" data-toggle="collapse" data-target="#b_reg" onclick="in_reg()">Регистрация</a>
            <a href="#" data-toggle="collapse" data-target="#b_vhod" onclick="in_ntr()">Войти</a>
          </small>
        </nobr></div>
      </dIV>

       <dIV class="collapse" id="b_reg">
          <div class="input-group"><nobr>
            <button type="submit" class="btn btn-primary btn-sm">Регистрация</button>
            <small>
              <a href="#" data-toggle="collapse" data-target="#b_vhod" onclick="in_ntr()">Войти</a>
              <a href="#" data-toggle="collapse" data-target="#b_vost" onclick="in_vost()">Воcстановить пароль</a>
            </small>
         </nobr></div>
       </dIV>
</form>

Внутри подгружается блок GOOGLE CAPTHCA:
captcha.html

<script src="https://www.google.com/recaptcha/api.js?hl=ru&" async defer></script>
<div class="g-recaptcha" data-sitekey="ваш-ключ" data-type="image" data-theme="light"></div>