The menu starts off in the open position when the page loads, but it should remain closed until it

Question

The menu starts off in the open position when the page loads, but it should remain closed until it

I'm having trouble with my menu; it displays when the page loads but I want it to be closed and then open when clicked. Despite my best efforts, I can't seem to fix this issue.

<html>
<head>
<script>
    $(document).ready(function () {
    $('#nav p')
        .css({ cursor: "pointer" })
        .on('click', function () {
            var txt = $(this).text() == "MENU" ? "CLOSE" : "MENU";
            $(this).text(txt);
            $(this).next('ul').toggle();
        })
    });
</script>
</head>

<body>
    <div class="left" id="nav">
        <p>CLOSE</p>
        <ul>
            <li id="light">
                <a href="lighting_video.html">Lighting + Video</a>
            </li>
            <li id="photo">
                <a class="active" href="photograms.html">Photograms</a>
            </li>
            <li id="about">
                <a href="about.html">About</a>
            </li>
        </ul>
    </div>
</body>

</html>

javascript jquery html css

Answer 1

Answer №1

$(document).ready(function(){
  $('#nav p')
    .css({cursor: "pointer"})
    .on('click', function(){
      var text =  $(this).text() === "MENU"?"CLOSE":"MENU"; // Checking for a match
      $(this).text(text);
      $(this).next('ul').toggle();
  })
  });

ul{
  display: none; /* Include this line */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="left" id="nav">
  <p>CLOSE</p>
  <ul>
<li id="light">
<a href="lighting_video.html">Lighting + Video</a>
</li>
<li id="photo">
<a class="active" href="photograms.html">Photograms</a>
</li>
<li id="about">
<a href="about.html">About</a>
</li></ul>
</div>
</body>
</html>

Answer 2

$(document).ready(function(){
  $('#nav p')
    .css({cursor: "pointer"})
    .on('click', function(){
      var text =  $(this).text() === "MENU"?"CLOSE":"MENU"; // Checking for a match
      $(this).text(text);
      $(this).next('ul').toggle();
  })
  });

ul{
  display: none; /* Include this line */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="left" id="nav">
  <p>CLOSE</p>
  <ul>
<li id="light">
<a href="lighting_video.html">Lighting + Video</a>
</li>
<li id="photo">
<a class="active" href="photograms.html">Photograms</a>
</li>
<li id="about">
<a href="about.html">About</a>
</li></ul>
</div>
</body>
</html>

Answer 3

Answer №2

You have the ability to achieve most tasks using CSS. Simply create a class called .closed and apply it to #nav.

#nav.closed > ul{
  display: none;
}

That's all it takes. Just make some minor adjustments in the jQuery click event!

Check out the code snippet below.

$(document).ready(function(){
  $('#nav p').on('click', function(){
      $(this).parent().toggleClass("closed");
    });
  });

#nav{
  cursor: pointer;
}
#nav.closed p::after{
  content : "CLOSE";
}
#nav p::after {
  content: "MENU";
}
#nav.closed > ul{
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="left closed" id="nav">
  <p></p>
  <ul>
    <li id="light">
      <a href="lighting_video.html">Lighting + Video</a>
    </li>
    <li id="photo">
      <a class="active"href="photograms.html">Photograms</a>
    </li>
    <li id="about">
      <a href="about.html">About</a>
    </li>
  </ul>
</div>
</body>
</html>

Answer 4

You have the ability to achieve most tasks using CSS. Simply create a class called .closed and apply it to #nav.

#nav.closed > ul{
  display: none;
}

That's all it takes. Just make some minor adjustments in the jQuery click event!

Check out the code snippet below.

$(document).ready(function(){
  $('#nav p').on('click', function(){
      $(this).parent().toggleClass("closed");
    });
  });

#nav{
  cursor: pointer;
}
#nav.closed p::after{
  content : "CLOSE";
}
#nav p::after {
  content: "MENU";
}
#nav.closed > ul{
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="left closed" id="nav">
  <p></p>
  <ul>
    <li id="light">
      <a href="lighting_video.html">Lighting + Video</a>
    </li>
    <li id="photo">
      <a class="active"href="photograms.html">Photograms</a>
    </li>
    <li id="about">
      <a href="about.html">About</a>
    </li>
  </ul>
</div>
</body>
</html>

The menu starts off in the open position when the page loads, but it should remain closed until it

Answer №1

Answer №2

Similar questions

The second tab on Bootstrap5's tab content feature seems to generate an endless amount of white

Avoid the occurrence of $("html").ajaxError() by ensuring it is not present in any of the $.ajax

Find and replace string words containing special characters such as $ or !

Is there a way to bypass media queries in a CSS file?

Adjust the size of items using a background image that covers the element

CSS3 alternative to width:calc(100% - 10px)

Editing HTML on an ASPX website can be a breeze with

SQL injection for storing hidden dates

When there are more than two divs on the page, they tend to overflow beyond the boundaries of

Creating HTML input elements dynamically using Javascript

Latest Chrome Update Resolves Fixed Positioning Bug

What are the main differences between Fluid Layout and Grid?

"Modify marker icon upon click event in Google Maps by utilizing the loadGeoJson function

The setInterval timer is malfunctioning within the render() method of ReactJS

Having issues with implementing Bootstrap 4 dynamic nav-pills in PHP CodeIgniter

Elements with absolute positioning are preventing drag events from executing

Display and conceal multiple div elements using a timer

Utilize the v-if directive within a v-for loop

How to use jQuery to select an element by using 'this' on a button

Artistic Canvas: Selected Image