Пока вопрос решился добавлением:
$('#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="you@email.ru" />
</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>