Mobile view toggles class but do not change element

I’ve searched a lot about this issue, however is slightly different from the others. Most of posts here relates to “toggle not working”, but mine toggle works, the problem is that it doesn’t change the view, it doesn’t open/close element.

Check the snippet below, you’ll see that does work on desktop but does not in mobile view.

Is there any special JS rule to make it works in mobile browsers or something related to touch screens? How to make it work?

  function toggleForm(event) {
    console.log("clicked");

    var form = document.getElementById('search-form');
    form.classList.toggle('hidden-form');

    console.log(form.classList);
  }

.hidden-form {
    display: none !important;
    height: auto !important;
}

<div onclick="toggleForm()" id="toggleButton">
  <h3>TITLE</h3>
</div>

<form action="#" id="search-form" class="hidden-form">
  TEXT
</form>