Toggle box wont work with button, but works with paragraph

Question

Im trying to make a toggle menu, however when i insert a <button> tag instead of a <p> tag the whole menu doesn't work, but it works with <p>.

How can i solve this problem?

Snippet:

function toggleMenu() {
  var menuBox = document.getElementById('menu-box');
  if (menuBox.style.display == "block") { // if is menuBox displayed, hide it
    menuBox.style.display = "none";
  } else { // if is menuBox hidden, display it
    menuBox.style.display = "block";
  }
}

<div id="infobox2">
  <form action="index.html" method="get">
    <p onclick="toggleMenu()" id="menu"> Skapa konto </p>
    <ul id="menu-box" style="display: block">
      <li><a href="index.html">Start</a></li>
      <li><a href="animal.html">Animal</a></li>
      <li><a href="pictures.html">Pictures</a></li>
    </ul>
  </form>
</div>

This is because the form is using the button, try researching a bit on javascript events and how to 'prevent' them — goosmaster, Mar 22 '17 at 09:37

score -1 · Accepted Answer · answered Mar 22 '17 at 09:36

-1

The default behaviour of a button tag is to send the form. This is why the page is being reloaded. If you don't want the button to send the form, you have to specify a type attribute.

<button type="button">Toggle</button>

Further reading:

https://www.w3schools.com/tags/att_button_type.asp

Especially this part:

Tip: Always specify the type attribute for the element. Different browsers may use different default types for the element.

answered Mar 22 '17 at 09:36

Chris Dąbrowski

1,902
1
12
12

Why should OP _"always specify the type attribute"_? Where is this assumption coming from? – Lelio Faieta Mar 22 '17 at 09:47
World Wide Web Consortium – Chris Dąbrowski Mar 22 '17 at 09:52
[W3C specifications](https://www.w3.org/TR/html5/forms.html#attr-button-type) just speaks about a list of types and about a default type (submit) if no type has been explicitly stated. Where is the type attribute defined as mandatory? – Lelio Faieta Mar 22 '17 at 10:02
have you read the html specifications? Your answer provide a solution and this is ok. It is just your tip to be wrong as it is not stated anywhere (also the browser different behaviour). Or you disagre also with the W3C consortium :) – Lelio Faieta Mar 22 '17 at 10:08

score -1 · Answer 2 · answered Mar 22 '17 at 09:42

-1

You have to prevent the default behaviour for the button . Just add return false in your function.

function toggleMenu() {
  var menuBox = document.getElementById('menu-box');
  if (menuBox.style.display == "block") { // if is menuBox displayed, hide it
    menuBox.style.display = "none";
  } else { // if is menuBox hidden, display it
    menuBox.style.display = "block";
  }
  return false;
}

<div id="infobox2">
  <form action="index.html" method="get">
    <p onclick="toggleMenu()" id="menu"> Skapa konto </p>
    <button onclick="toggleMenu()" id="menu1">Skapa konto1</button>
    <ul id="menu-box" style="display: block">
      <li><a href="index.html">Start</a></li>
      <li><a href="animal.html">Animal</a></li>
      <li><a href="pictures.html">Pictures</a></li>
    </ul>
  </form>
</div>

answered Mar 22 '17 at 09:42

Lelio Faieta

6,457
7
40
74

This is overkill. If you don't want some button to submit the form, you can change the type. – Chris Dąbrowski Mar 22 '17 at 09:43
this is not true at all. It is a javascript way to do the task compared to an html one. They are completely alternative. Also please do not downvote an answer only because you don't agree with that – Lelio Faieta Mar 22 '17 at 09:44
I disagree. I downvoted the answer because I believe it leads the OP in the wrong direction. Take it easy. – Chris Dąbrowski Mar 22 '17 at 09:53

Toggle box wont work with button, but works with paragraph

2 Answers2