Блог

 $(".right-arrow").on('click', () =gt; {  $("#interview-map").attr("hidden", "")  $(".titulo").attr("hidden", "")  $(".fuentestyle").removeAttr('hidden')  $(".container").removeClass("back-1").addClass("back-2")  }) 

 lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"gt;lt;/scriptgt; lt;div class="container back-1 py-3 h-100"gt;  lt;div class="location-container col-12"gt;  lt;label for="inputAddress2" class="titulo form-label"gt;¿Whats your address? lt;/labelgt;   lt;div id="interview-map" class="row"gt;  lt;div class="locate"gt;  lt;pgt;show my positionlt;/pgt;  lt;input id="track" type="checkbox" /gt;  lt;/divgt;  lt;/divgt;  lt;img class="right-arrow" src="assets/img/right_arrow.png" alt=""gt;  lt;/divgt;  lt;div class="col-md-12"gt;  lt;form id="form_interview" class="col-lg-12 row g-3 mx-10 my-10"gt;  lt;div id="interview-address" class="fuentestyle col-12" hiddengt;  lt;label for="referencia" class="form-label"gt;Add your address: lt;/labelgt;  lt;input type="text" class="form-control" id="referencia" placeholder="Reference"gt;  lt;/divgt;   lt;div class="mb-3" hiddengt;  lt;label for="disabledSelect" class="form-label"gt;¿Question fuente?lt;/labelgt;  lt;select id="fuente" class="form-select form-select-sm" aria-label=".form-select-sm example"gt;  lt;option id="fuente-0" selected class="form-control"gt;lt;/optiongt;  lt;option id="fuente-1" value="1"gt;lt;/optiongt;  lt;option id="fuente-2" value="2"gt;lt;/optiongt;  lt;option id="fuente-3" value="3"gt;lt;/optiongt;  lt;option id="fuente-4" value="4"gt;lt;/optiongt;  lt;/selectgt;  lt;/divgt;  lt;div class="mb-3" hiddengt;  lt;label for="disabledSelect" class="form-label"gt;Question construidolt;/labelgt;  lt;select id="construido" class="form-select form-select-sm" aria-label=".form-select-sm example"gt;  lt;option id="construido-0" selected class="form-control"gt;lt;/optiongt;  lt;option id="construido-1" value="1"gt;lt;/optiongt;  lt;option id="construido-2" value="2"gt;lt;/optiongt;  lt;/selectgt;  lt;/divgt;  lt;div class="col-12" hiddengt;  lt;label for="dias_agua" class="form-label"gt;Question dias_agua lt;/labelgt;  lt;input type="text" class="form-control" id="dias_agua" placeholder="Enter a number"gt;  lt;/divgt;  lt;div class="col-12" hiddengt;  lt;label for="horas_agua" class="form-label"gt;Question horas_agua lt;/labelgt;  lt;input type="text" class="form-control" id="horas_agua" placeholder="Enter a number to 24"gt;  lt;/divgt; 

 let index = 1;  function back() {  index--;  update(); }  function next() {  index  ;  update(); }  function update() {  // Find all questions  const questions = document.querySelectorAll("[id^='question-']");    // Hide all questions  questions  .forEach(question =gt; {  question.style.display = "none";  });    // Show the active question  const activeQuestion = document.getElementById("question-"   index);  if (activeQuestion != null)  activeQuestion.style.display = "block";    // Hide/Show the buttons according to which question is being shown  document.getElementById("back").style.display = index lt;= 1 ? "none" : "block";  document.getElementById("next").style.display = index gt;= questions.length ? "none" : "block"; }  update(); 

 lt;div id="question-1"gt;Question 1lt;/divgt; lt;div id="question-2"gt;Question 2lt;/divgt; lt;div id="question-3"gt;Question 3lt;/divgt; lt;div id="question-4"gt;Question 4lt;/divgt; lt;div id="question-5"gt;Question 5lt;/divgt; lt;button id="back" onclick="back()"gt;Backlt;/buttongt; lt;button id="next" onclick="next()"gt;Nextlt;/buttongt;