Show Hide Div's Dependent on Click

Question

Я пытаюсь закодировать «страницу», которая задает пользователю вопрос с ответом «да/нет». Если они ответят «да», будет показана новая «страница», если они ответят «нет», будет показана другая «страница». Всего будет 6 разных «страниц».

Я загружу все «страницы» в div и спрячу все, кроме первого.

Я не совсем уверен, с чего начать с кода JS, должен ли я отображаться/скрываться для каждой страницы отдельно или я могу объединить в одном случае функцию 0: случай 1?

.page { display:none; width:100%; } 
 
#p1 {display: inline-block;}

<div id="lpage"> 
 

 

 
<section class="page" id="p1"> 
 
<h1>This is Page 1</h1> 
 
<div class="yes">Yes</div> 
 
<div class="no">No</div> 
 
</section> 
 

 
<section class="page" id="p2"> 
 
<h1>This is Page 2</h1> 
 
<div class="yes">Yes</div> 
 
<div class="no">No</div> 
 
</section> 
 

 
<section class="page" id="p3"> 
 
<h1>This is Page 3</h1> 
 
<div class="yes">Yes</div> 
 
<div class="no">No</div> 
 
</section> 
 

 
<section class="page" id="p4"> 
 
<h1>This is Page4</h1> 
 
<div class="yes">Yes</div> 
 
<div class="no">No</div> 
 
</section> 
 

 
<section class="page" id="p5"> 
 
<h1>This is Page 5</h1> 
 
<div class="yes">Yes</div> 
 
<div class="no">No</div> 
 
</section> 
 

 
<section class="page" id="p6"> 
 
<h1>This is Page 6</h1> 
 
<div class="yes">Yes</div> 
 
<div class="no">No</div> 
 
</section> 
 

 
</div>

Answer 1

Если вы используете JQuery (то, что я рекомендую), вы можете сделать простую функцию для этой функции:

Answer 2

Попробуйте что-то вроде этого с помощью JQuery:

$(".yes").click(function() { 
    var parentSectionId = $(this).parent(".page").attr('id'); 

    if(parentSectionID == "p1") { 
    $("#p2").hide(); 
    $("#p4").hide(); 
    $("#p3").show(); 
    } 

    if(parentSectionID = "p2") { 
    ... 
    } 

и так далее. Затем вы обрабатываете случаи «нет» в отдельной функции щелчка, просто заменив «да» на «нет».