Using Javascript to toggle between showing and hiding a block element

Although I've seen similar posts, I'm struggling to understand why my function isn't working. I'm still learning, so please be gentle with me! Here's the code snippets:

HTML:

<div id="BurgerMenu">
    <button onclick="menuBurger()">
        &#9776;
    </button>
</div>

<nav id="SecondNav">
    <ul>
        <li><a href="#itineraires">Itinéraires</a></li>
        <li><a href="#trafic">Infos trafic</a></li>
        <li><a href="#actualite">Actualité</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
</nav>

CSS:

@media screen and (max-width: 812px) { 
    #FirstNav{
        display:none !important;
    }

    #sectionLogo{
        margin: 25px;
    }

    #secondHeader{
        display :flex;
        flex-flow: row-reverse nowrap !important;
        justify-content: space-between;
        align-items: baseline !important;
        padding-left: 40px;
        padding-right: 40px;
    }

    #BurgerMenu{
        display: block !important;
    }
    
    #SecondNav{
        display: none !important;
}

}

JavaScript Function:

function menuBurger(){
    var x = document.getElementById("SecondNav");
    if (x.style.display === "none"){
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}

I'm unable to remove the !important in CSS as it is necessary for the functionality. Thank you for your explanation!

javascript

Answer №1

Avoid using !important as it is causing issues in conjunction with the id selector. Instead, utilize the toggle function to dynamically add or remove classes when needed.

function toggleMenu() {
  document.getElementById("SecondNav").classList.toggle('toggleDisplay')
}
@media screen and (max-width: 812px) {
  #FirstNav {
    display: none !important;
  }
  #sectionLogo {
    margin: 25px;
  }
  #secondHeader {
    display: flex;
    flex-flow: row-reverse nowrap !important;
    justify-content: space-between;
    align-items: baseline !important;
    padding-left: 40px;
    padding-right: 40px;
  }
  #BurgerMenu {
    display: block;
  }
  .toggleDisplay {
    display: none;
  }
}
<div id="BurgerMenu">
  <button onclick="toggleMenu()">
                &#9776;
            </button>
</div>

<nav id="SecondNav">
  <ul>
    <li><a href="#itineraires">Itinéraires</a></li>
    <li><a href="#trafic">Infos trafic</a></li>
    <li><a href="#actualite">Actualité</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Instructions for adjusting the size of my modal window when the keyboard appears?

While developing a next.js app, I encountered an issue with the chat modal. When the input field is in focus, I want to resize the modal height so that the keyboard popup does not hide the input field. I attempted to modify the DOM but could not get it to ...

javascriptcssreactjsnext.js

Is it possible to perform unit testing on an onClick function that does not rely on a mouse click event?

My question is related to an onClick function in React const handleOnClick = (e: React.MouseEvent<HTMLButtonElement>) => { if (e) { this.props.log(); } } I'm wondering how I can test using jest and enzyme ...

javascriptreactjsfrontendjestjsenzyme

What is the correct method for exporting an ES6 module function as a library to be utilized in a Node.js application?

Imagine having a node.js application that does not pass through webpack bundling: Node App const Html = require('./build/ssr-bundle.js'); let result = Html.ssrbundle.render(); console.log(result); Here is my ES6/JSX file, which undergoes web ...

javascriptnode.jswebpackes6-modules

Crafting jQuery Plugins with Object-Oriented Programming

Curious about the latest techniques for creating jQuery Plugins? There are so many different methods out there, it's hard to know which one is most effective. Could you recommend any helpful resources or templates for developing jQuery Plugins using ...

javascriptjquery

Problem with Resetting State in Cordova/AngularJS

Currently, I am facing a challenge with my Cordova/AngularJS mobile application as I struggle to refresh the current state with new data. Please be aware that this is not an Ionic Framework application. The issue arises in the part of my app where I need ...

javascriptangularjscordova

Tips for obtaining the iframe #document with cheeriojs?

I've been struggling to scrape the anime videos page [jkanime], specifically with extracting the mp4 video formats embedded in an iframe #document. Despite trying to use cheerio for querying, I've only managed to retrieve src links from Facebook ...

javascripttypescriptiframeweb-scrapingcheerio

To enhance the MUI v5 table row, simply apply a border when the mouse hovers

After working on creating a table with Material UI v5, I encountered an issue where I wanted to add a blue border to the table row when the mouse pointer hovered over it. I attempted several methods and did thorough research, but unfortunately, I was unab ...

javascripthtmlcssreactjsmaterial-ui

Improper Placement of TransformControls in three.js

Using the following code snippet, I am able to generate a box: let v = [ new THREE.Vector3(-100,30,10), new THREE.Vector3(-100,30,-10), new THREE.Vector3(-100,-10,10), new THREE.Vector3(-100,-10,-10), ...

javascriptthree.js

If you press Ctrl + F, the browser will disable the form search function

How can I prevent the form find browser functionality when pressing Ctrl+F, and instead focus on the element html? <div id='demo'> <form class="id5-text-find-form" id="id5-text-find-form"> <input class="search" placeho ...

javascriptjqueryhtmlcssbrowser

Button activated on second click

As I am working on a project, I encountered an issue with two buttons and one input field. The input field is supposed to take the value of the clicked button, but currently, the function works only after the second click on the button. I have tried using ...

javascriptjqueryvue.js

Validating the userid with jQuery before form submission

Currently, I am working on a form where I need to validate if the userID is already in use before allowing the user to submit it. After some research, I came across a solution on another website. However, when I tried to implement the code, I encountered ...

javascriptjqueryajax

Display only the offcanvas button

Having trouble with Bootstrap 5 offcanvas? The offcanvas doesn't hide when I click the button again. <button data-bs-toggle="offcanvas" role="button">Add to Cart</button> Every time I click the button again, the offcan ...

javascriptjquerybootstrap-5

Guide to converting JSON data into object structures

Question - How do I convert JSON data into objects? You can find the JSON data here Details - After successfully connecting to the API and retrieving the JSON data, I am looking to map two arrays data.hourly.time[] and data.hourly.temperature_2m[] into a ...

javascriptajaxrest

Exploring the Use of 7BitEncodedInt in JavaScript

Currently, I am trying to read a binary file using JavaScript. It appears that this file may have been written in C#, which handles strings differently from how it's done in the source mentioned at https://learn.microsoft.com/en-us/dotnet/api/system. ...

javascriptnpm7-bit

Is there a way to superimpose text onto an image within a ReactJS/NextJS application?

I'm facing issues with applying CSS styles properly in my ReactJS/NextJS application. I am working on a component that displays an image with text overlaid on it. Despite testing the styles on w3schools, I cannot seem to get them to work correctly in ...

javascriptcssreactjsnext.jsnext.js13

What is the best way to form a new array using a provided list?

My JavaScript code includes an array and a list. const headr = [H1, H2 ,H3, H4] const Year = ['1Y', '2Y' ,'3Y', '4Y'] let arr_ = { H1 : Array(3) 0 : {Year: '1Y', Type: 'TypeA', Value: -414 ...

javascriptarrays

Discover the method for inserting a title attribute value into a span element

Utilizing AngularJS to retrieve and display data within a span element. I am now aiming to utilize this value as the title for another span element. The current code being used is shown below: <span style="display: inline-block; width: 160px">{{acti ...

javascriptjqueryhtmlasp.netangularjs

Following the upgrade to J-Query 3.x, the function Date.today is no longer supported

Recently, I updated my local jQuery library from version 1.9.1 to 3.6.0 and encountered some unexpected issues. Despite searching online, I could not find any solutions for these problems. The errors seem to be related to standard JavaScript functions rath ...

javascriptjquerynode.jsarraysdate

Loading a new view within AngularJS using the ng-view directive opens up a fresh

I am currently working on integrating Angular with a REST API for the login process. After successfully setting up Angular with my REST calls, I aim to redirect to a new page upon successful login. In my success handler, I have implemented the following ...

javascriptangularjs

Performing two ajax calls within a non-existent div that has only just been appended

I've been developing a website similar to 9gag. I attempted to incorporate a voting feature created by someone else, as I'm not well-versed in AJAX requests, but it just doesn't seem to be functioning. My index.php file fetches five posts f ...

javascriptphpjqueryhtmlajax