HTML show and hide not working in Mozilla Firefox

Question

I have an HTML document with headings, when you click on the heading it expands and when you click on it again it collapses. This works perfectly with most browsers except Firefox Mozilla. When I open it with Firefox Mozilla the headings do not want to expand at all.

Code below:

 .mystyle { width: 100%; padding: 25px; background-color: coral; color: white; font-size: 25px; } i { border: solid #ffb200; border-width: 0 5px 5px 0; display: inline-block; padding: 5px; } .down { color: #ffb200; transform: rotate(45deg); -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); } .right { color: #ffb200; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); } .mainnav { display: none; } 

 <script> function myFunction() { var x = event.target.nextElementSibling, y = event.target.firstChild; if (x.style.display === 'none' || x.style.display === '') { x.style.display = 'block'; y.classList.add("down"); y.classList.remove("right"); } else { x.style.display = 'none'; y.classList.remove("down"); y.classList.add("right"); } } </script> <h3 class="sidebar-heading"> <a class="sidebar-heading" href="#logins"> <u>SYSTEM LOGINS</u></a> </h3> <h4 onclick="myFunction(event);" class="sidebar-heading2"><i class="right" style="top:-50px"></i> Login types</h4> <div class="mainnav"> <nav id="mainnav"> <ul> <li><a href="#Admin">login</a></li> <li><a href="#Student">Student login</a></li> <li><a href="#Guest">Guest login</a></li> </ul> </nav> </div> 

Please advise. Thank you

Answer 1

In your function you're trying to reference the global event parameter you passed to your inline onclick handler but you haven't referenced it as a parameter in your function.

Change myFunction() to myFunction( e ) as you should be referencing anything you pass into a function as an argument. You can use any argument name you'd like, but keep it descriptive so you know what you're working with when you reference it in your function body. e is a common name used for an event object.

Some browsers give you access to the global event object and others don't. That's why it worked for some browsers and not others.

 .mystyle { width: 100%; padding: 25px; background-color: coral; color: white; font-size: 25px; } i { border: solid #ffb200; border-width: 0 5px 5px 0; display: inline-block; padding: 5px; } .down { color: #ffb200; transform: rotate(45deg); -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); } .right { color: #ffb200; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); } .mainnav { display: none; } 

 <script> function myFunction( e ) { var x = e.target.nextElementSibling, y = e.target.firstChild; if ( x.style.display === 'none' || x.style.display === '' ) { x.style.display = 'block'; y.classList.add( 'down' ); y.classList.remove( 'right' ); } else { x.style.display = 'none'; y.classList.remove( 'down' ); y.classList.add( 'right'); } } </script> <h3 class="sidebar-heading"> <a class="sidebar-heading" href="#logins"> <u>SYSTEM LOGINS</u></a> </h3> <h4 onclick="myFunction( event );" class="sidebar-heading2"><i class="right" style="top:-50px"></i> Login types</h4> <div class="mainnav"> <nav id="mainnav"> <ul> <li><a href="#Admin">login</a></li> <li><a href="#Student">Student login</a></li> <li><a href="#Guest">Guest login</a></li> </ul> </nav> </div> 

As a side note I wouldn't inline your event handlers, use addEventListener instead.