hide Problem Hiding/showing a menu.

[sarahfoxnz]

I started to follow the https://www.w3schools.com/w3css/w3css_navigation.asp  navigation page. However the menu I want required a bit more - with a few SELECT fields and a form. 

My page is here :- http://newtib.kwister.com/

 

The menu at the top (marked in HTML code as  <!-- NEW MENU -->  works fine. 

On  big/medium screen - it is the same, However on a small screen (mobile) I see a small button which says "HIDE MENU".  This is OK. & when I press the button, the menu hides itself.

PROBLEM: within 1-2 seconds of pressing the button, the menu reappears. I am wondering if someone can assist with finding a problem with the script ?

(on a mobile). 

if Div is hidden, show it it

if Div is visible, Hide it

 

I have TWO divs (one underneath). Which shows another button.  If one div is hidden, the other div is visible. its supposed to swap when the buttons are pressed..  

 

[Ingolme]

Set the type attribute of the button: <button type="button"> so that it won't try to submit the form.

[sarahfoxnz]

34 minutes ago, Ingolme said:

Set the type attribute of the button: <button type="button"> so that it won't try to submit the form.

Thank you - That part worked. Ive fixed 1-2 other things as well, but Im baffled as to my next problem.

 

If i click on the button - It does hide the menu - which is good. But it does not make the 2nd div "menu1" visible. so the mobile-phone user cant make the menu re-appear.

(though if they go to another page - the top menu does reappear.. ) .. i may do cookies so the option carries forward.

 

[sarahfoxnz]

FIXED IT. Ive removed the w3-hide-small class  and added the style -  display: none;

<div id="menu1" class="w3-cell-row  w3-hide-large w3-hide-medium" style="width:75%; display: none;">