Attempting to toggle the menu with jQuery does not yield any results

Question

Attempting to toggle the menu with jQuery does not yield any results

I am fairly new to the world of javascript and jQuery and I'm encountering some issues that are proving difficult to troubleshoot. I am experimenting with the .toggle function on a menu list, but when I click the temporary button I've set up for toggling, nothing seems to be happening.

Here is my code:

$(document).ready(function() {
  $("#menuIcon").click(function() {
    $("#menu").fadeIn(1000);
  });
});

#menuIcon {
  display: none;
}
@media screen and (max-width: 1000px) {
  #menu {
    display: none;
  }
  #menuIcon {
    display: block;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="menuIcon">Click Me</button>
<div id="menu">
  <nav>
    <ul>
      <li>Home</li>
      <li>About</li>
      <li>Page</li>
      <li>Contact</li>
    </ul>
  </nav>
</div>

jquery html css

Answer 1

Answer №1

Include the jQuery script in your code and utilize jQuery toggle to switch the display of your menu.

$("#menu").toggle("display")

At the moment, you are only fading in the menu.

See the following revised code:

<!DOCTYPE html>
<html lang="en">
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <style>
    #menuIcon{
        display: none;
    }
        @media screen and (max-width: 1000px){
            #menu{

                display: none;
            }
            #menuIcon{
                display: block;
            }
        }
    </style>
    </head>
    <body>
    <button id="menuIcon">Click Me</button>
    <div id="menu">
        <nav>
            <ul>
                <li>Home</li>
                <li>About</li>
                <li>Page</li>
                <li>Contact</li>
            </ul>
        </nav>
    </div>
    <script>
        $(document).ready(function(){
            $("#menuIcon").click(function(){
                $("#menu").toggle("display");
            })
        });
    </script>
</body>
</html>

Answer 2

Include the jQuery script in your code and utilize jQuery toggle to switch the display of your menu.

$("#menu").toggle("display")

At the moment, you are only fading in the menu.

See the following revised code:

<!DOCTYPE html>
<html lang="en">
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <style>
    #menuIcon{
        display: none;
    }
        @media screen and (max-width: 1000px){
            #menu{

                display: none;
            }
            #menuIcon{
                display: block;
            }
        }
    </style>
    </head>
    <body>
    <button id="menuIcon">Click Me</button>
    <div id="menu">
        <nav>
            <ul>
                <li>Home</li>
                <li>About</li>
                <li>Page</li>
                <li>Contact</li>
            </ul>
        </nav>
    </div>
    <script>
        $(document).ready(function(){
            $("#menuIcon").click(function(){
                $("#menu").toggle("display");
            })
        });
    </script>
</body>
</html>

Answer 3

Answer №2

To get it functioning properly, simply include the jquery cdn script.

 <!DOCTYPE html>
<html lang="en">
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <style>
    #menuIcon{
        display: none;
    }
        @media screen and (max-width: 1000px){
            #menu{

                display: none;
            }
            #menuIcon{
                display: block;
            }
        }
    </style>
    </head>
    <body>
    <button id="menuIcon">Click Me</button>
    <div id="menu">
        <nav>
            <ul>
                <li>Home</li>
                <li>About</li>
                <li>Page</li>
                <li>Contact</li>
            </ul>
        </nav>
    </div>
    <script>
        $(document).ready(function(){
            $("#menuIcon").click(function(){
                $("#menu").fadeIn(1000);
            })
        });
    </script>
</body>
</html>

Answer 4

To get it functioning properly, simply include the jquery cdn script.

 <!DOCTYPE html>
<html lang="en">
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <style>
    #menuIcon{
        display: none;
    }
        @media screen and (max-width: 1000px){
            #menu{

                display: none;
            }
            #menuIcon{
                display: block;
            }
        }
    </style>
    </head>
    <body>
    <button id="menuIcon">Click Me</button>
    <div id="menu">
        <nav>
            <ul>
                <li>Home</li>
                <li>About</li>
                <li>Page</li>
                <li>Contact</li>
            </ul>
        </nav>
    </div>
    <script>
        $(document).ready(function(){
            $("#menuIcon").click(function(){
                $("#menu").fadeIn(1000);
            })
        });
    </script>
</body>
</html>

Attempting to toggle the menu with jQuery does not yield any results

Answer №1

Answer №2

Similar questions

What is the process for displaying objects within an object using HTML?

Get the value of an HTML element

Managing input jQuery with special characters such as 'ä', 'ö', 'ü' poses a unique challenge

Verification symbols in Unicode

Creating a semi-circle donut chart with Highcharts using the Highcharts-ng library

Why does it appear that Angular is undefined in this straightforward Angular demonstration?

Exploring the fundamentals of Jquery syntax and the powerful world of

Discover the index of the row when the value in the dropdown list is updated

Input field for postal code containing only numbers (maximum 5 digits) in Angular version 4/5

Book Roulette: Your Next Random Read

After executing grunt serve, Bower issues a warning for jquery stating "not injected"

Button group malfunctions on smaller screens

Get rid of the margins on your Wordpress theme

Having trouble selecting a URL tag that was dynamically created using JQuery by its class?

What are some ways to obscure the stored password in a database with characters like asterisks or other symbols

Learn how to display JSON data sent from the server on a webpage

What is the best way to target a specific item in a list using JavaScript in order to modify its appearance?

Avoid duplication of elements in Angular applications

How to position a Bootstrap 4 button group at the bottom of a flexbox container

Is there a way to fix the noticeable difference in how bold text appears between IE11 and Chrome?