Navigation bar JavaScript

Question

I am writing a code to open and close navigation bar with the button my code is as follows

#DIV1{
    display:block;}

        <div id="DIV1">
        <ul class="topnav">
          <li><a href="#about">About</a></li>
          <li><a href="#contact">Contact</a></li>
          <li><a href="#news">News</a></li>
          <li><a href="#home">Home</a></li>
          </ul>

        </div>
        <button  onClick="abc()">HIDE</button>
    <script>
    function abc()
    {
        var togg = document.getElementById('DIV1')
         if (togg.style.display == "block")
        {
            togg.style.display="none";
        }

        else if (togg.style.display == "none")
        {
            togg.style.display="block";
            }

    }
    </script>

It wont work what should I do or what am I doing wrong? There are other CSS properties for navigation bar which I have skipped.

ReSedano · Accepted Answer · 2018-10-28 07:32:43Z

2

It doesn't work because you have to set its display with javascript or with inline style to get something by yourDiv.style.display. In your case, when you click on your button, the display is not set and then you can't enter nor in your if neither in your else if statement. So try this:

var togg = document.getElementById('DIV1');
togg.style.display="block"; /* => I set a display value */

function abc(){
   if (togg.style.display == "block")
  {
      togg.style.display="none";
  }

  else if (togg.style.display == "none")
  {
      togg.style.display="block";
  }

}

#DIV1 {
   display:block;
}
/*you can remove this rule. You are changing the display via javascript */

<div id="DIV1">
<ul class="topnav">
  <li><a href="#about">About</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#home">Home</a></li>
</ul>

</div>
<button  onClick="abc()">HIDE</button>

Another way: you could simply create a class to "hide" your div and then toggle it using classList and toggle:

function abc(){
    var togg = document.getElementById('DIV1')
    togg.classList.toggle("myClass");
}

.myClass {
   display:none;
}

<div id="DIV1">
  <ul class="topnav">
    <li><a href="#about">About</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#home">Home</a></li>
  </ul>
</div>
<button  onClick="abc()">HIDE</button>

edited Oct 28, 2018 at 7:32

answered Oct 27, 2018 at 22:49

ReSedano

5,0802 gold badges20 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ahmed Riaz Over a year ago

you are awesome <3

jungle17 · Accepted Answer · 2018-10-27 22:20:00Z

1

here is the correct code:

<style> #DIV1{
    display:block;}
</style>

        <div id="DIV1">
        <ul class="topnav">
          <li><a href="#about">About</a></li>
          <li><a href="#contact">Contact</a></li>
          <li><a href="#news">News</a></li>
          <li><a href="#home">Home</a></li>
          </ul>

        </div>
        <button  onClick="abc()">HIDE</button>
    <script>
    function abc()
    {
        var togg = document.getElementById('DIV1');
         if (togg.style.display == "block")
        {
            togg.style.display="none";
        }

        else 
        {
           togg.style.display="block";
        }

    }
    </script>

answered Oct 27, 2018 at 22:20

jungle17

111 bronze badge

2 Comments

charlietfl Over a year ago

Best to provide an explanation of what is different and why it resolves problem

Bhaskar Choudhary Over a year ago

First click on hide doesn't hide the nav. Second click does.

Ferdinando · Accepted Answer · 2018-10-27 22:22:34Z

if i understood your question try this one:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <style>
     #div1{
        display:block;}
    </style>
            
        <script>
        function abc()
        {
            var togg = document.getElementById("div1")
             if (togg.style.display === "none")// 3 === 
            {
                togg.style.display="block";
            }

            else {
    		togg.style.display="none";
            }

        }
        </script>

    </head>
    <body>
    <div id="div1">
            <ul class="topnav">
              <li><a href="#about">About</a></li>
              <li><a href="#contact">Contact</a></li>
              <li><a href="#news">News</a></li>
              <li><a href="#home">Home</a></li>
              </ul>

            </div>
            <button  onclick="abc()">HIDE</button>
    </body>
    </html>

Collectives™ on Stack Overflow

Navigation bar JavaScript

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related