HTML FAQ and Autofoward

1 Answer

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

(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>

commented Jan 26 by anonymous

I don't see the type=button change in the code snippet you have provided. What change have you made?

commented Jan 26 by Zachary Platinum

(164,025 points)

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?

commented Jan 26 by B

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">

commented Jan 26 by Zachary Platinum

(164,025 points)

Most popular tags

Have an idea?

HTML FAQ and Autofoward

Your comment on this question:

Your solution to the original question

1 Answer

Your comment on this answer: