Блог

Объяснение:-

Я две кнопки Да и Нет

Допустим, есть два div элемента следующим образом

<div id="div1">Yes button clicked</div>

<div id="div2">No button clicked</div>

Если пользователь нажимает Да, id="div1" отображается, скрывая id="div2" .

Когда пользователь нажимает Нет, id="div2" отображается, скрывая id="div1" .

Я могу добиться этого с collapse помощью in Bootstrap , но дело в том, что когда я нажимаю Yes , div элемент для No также доступен.

Вот фактический код, который я пробовал до сих пор

  <div class="jumbotron m-4" id="accordion">
  <h1 class="display-5 text-center">Do you remember your current password?</h1>
  <p class="text-center">
   <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#password_reset_form" aria-expanded="false" aria-controls="password_reset_form" id="rp_yes">Yes</button>
   <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#not_rem_p" aria-expanded="false" aria-controls="not_rem_p" id="rp_no">No</button>
</p>
</div>


<div class="collapse" id="password_reset_form">//Form to change password</div>
<div class="collapse" id="not_rem_p"><a href="#">Use Forgot Password instead</a></div>
  

Итак, когда я нажимаю «Да«, отображается форма, но когда я нажимаю «нет«, ссылка «Забыли пароль» также отображается вместе с формой сброса пароля. Я хочу показывать по одному из них за раз. Как мне это сделать?

Вам нужно будет использовать jQuery script предоставленный Bootstrap для достижения желаемого —

 <p>                    ---->>Updated here
<button type="button" class="btn btn-primary" id="rp_yes">Yes</button>
   <button type="button" class="btn btn-primary" id="rp_no">No</button>
</p>

  

Скрипт

 $('#rp_yes').click(function(){
            $("#password_reset_form").collapse('show');
                 $("#not_rem_p").collapse('hide');
        });
        $('#rp_no').click(function(){
                $("#not_rem_p").collapse('show');
                $("#password_reset_form").collapse('hide');
        });

  

$(<selector>).collapse('options') здесь требуется изменение. Больше документации здесь Bootstrap Collapse

Это должно сработать.

Вы могли бы легко добиться того, чего хотите, сначала скрыв все с помощью class .collapse , а затем show .

Т.е. для кнопок

 onClick="$('.collapse').hide();$('#div1').show();"