Have an idea?

Visit Sawtooth Software Feedback to share your ideas on how we can improve our products.

HTML FAQ and Autofoward

Hello - Prior to a survey, I am adding an FAQ page.

To make it look nice, I am using the following HTML code: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_accordion

The problem I am having is that as soon as I click a FAQ question, it auto forwards to the next question with no time to read.

Any thoughts on how to eliminate this auto forward?

Ideally, the next button would not even display for 30 seconds or so to force the user to read some.
asked Jan 26 by B

1 Answer

0 votes
In many browsers, the default type of a button is "submit."  When such a button appears in a form element - as would HTML added to a question in Lighthouse Studio - clicking on it causes the page to attempt to submit.  To prevent this, you can explicitly change the button's type like this:

<button type="button">Click me</button>


The below script should hide the navigation buttons for thirty seconds.  If you wish to modify the time, remember that it is in milliseconds rather than seconds.

<script>
$(document).ready(function(){
    var submit = $('#previous_button, #next_button');
    $(submit).css('visibility', 'hidden');
    var interval = setInterval(function(){
        $(submit).css('visibility', 'visible');
        clearInterval(interval);
    }, 30000);
})
</script>
answered Jan 26 by Zachary Platinum Sawtooth Software, Inc. (164,025 points)
Thank you, Zach.

I add the code above in but it still does not seem to fix it.

Should it be added into a specific spot?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.active, .accordion:hover {
  background-color: #ccc;
}

.panel {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}
</style>
</head>
<body>

<h2>Accordion</h2>

<button class="accordion">Section 1</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Section 2</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Section 3</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Section 4</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}
</script>

</body>
</html>
I don't see the type=button change in the code snippet you have provided.  What change have you made?
I added the direct code you provided (<button type="button">Click me</button>) but it just added a "click me box" at the bottom.

It sounds like I am missing a change somewhere else in the HTML?
You don't need to add a new button - you need to modify the buttons in your current HTML.  From this:

<button class="accordion">


to this:

<button type="button" class="accordion">
...