Toggling menu problematic

user_17519199 0
Viewed 53

I'm trying to hide and show .sub-menu by clicking the .menu anchor, it works only by showing it. If I press to hide it has no reaction, what I am supposed to do and what is the mistake?

Here is the code.

HTML:

<div class="menu">
  <a href="javascript:myFunction();" class="nav" onclick="myFunction()">
  <div class="unu"></div>
  <div class="doi"></div>
  <div class="trei"></div>
  </a>
 <div id="sm">
   <a href="#">FAQ</a>
   <a href="#">Support</a>
   <a href="#">Features</a>
 </div>
</div>

CSS:

nav div{
    height:7px;
    background-color: white;
    margin: 5px 0;
    border-radius: 25px;
}

.menu {
    position: absolute;
    display:inline-block;
    text-align:center;
    right:130px;
    top:60px;
}

.unu {
    width: 45px;
 }
    
.doi {
    width: 20px;
}
    
.trei {
    width:35px;
}

#sm {
    display: none;
}

JS:

function myFunction() {
    var x = document.getElementById("sm")
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}
css html javascript
3 Answers

If you use

console.log(`${x.style.display}`)

you will get

<empty string>

in your first attempt not

none

that is why you need to set

function myFunction() {
    var x = document.getElementById("sm")
    if (x.style.display === "" || x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}

I will add a console.log in window.load event to see what is the value of the sm element when the page load at first. And you can also check what is new properties when you click button.

const myDiv = document.getElementById('sm');

const controlButton = document.querySelector('button')

window.addEventListener('load', () => {
    console.log(`${myDiv.style.display}`);
})

controlButton.addEventListener('click', () => {
    
    
    if (myDiv.style.display === "" || myDiv.style.display === "none") {
        myDiv.style.display = "block";
    } else {
        myDiv.style.display = "none";
    }
    console.log(`${myDiv.style.display}`);
})
*, 
*::before,
*::after{
    box-sizing: border-box;
}

body {
    font-family: sans-serif;
    min-height: 100vh;
    margin: 0;
    background-color: bisque;
}

nav div{
    height:7px;
    background-color: white;
    margin: 5px 0;
    border-radius: 25px;
    
}

.menu {
    position: absolute;
    display:inline-block;
    text-align:center;
    right:130px;
    top:60px;
}

.unu {
    width: 45px;
 }
    
.doi {
    width: 20px;
}
    
.trei {
    width:35px;
}

#sm {
    display: none;
}
 

button{
    position: absolute;
    width: 5rem;
    height: 5rem;
    background-color: greenyellow;
    top: 5rem;
    left: 5rem;
}
<div class="menu">
        <div class="unu"></div>
        <div class="doi"></div>
        <div class="trei"></div>
      </a>
      <div id="sm">
        <a href="#">FAQ</a>
        <a href="#">Support</a>
        <a href="#">Features</a>
      </div>
</div>
<button>Click me</button>

user_177557770

Instead of using display property you can create a .class for toggling which is quite simple than checking styles.

const toggle = document.querySelector('.toggle');
const hidden = document.querySelector('.hidden');

toggle.addEventListener('click', event => {
  // because anchor's default behaviour is redirecting
  event.preventDefault();
  hidden.classList.toggle('revealed');
});
* {
  margin: 0;
  padding: 0;
  outline: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  display: grid;
  place-items: center;
}

.toggle,
.hidden {
  font-family: sans-serif;
  font-size: 1.5rem;
}

.hidden {
  position: absolute;
  margin-top: 6rem;
  display: none;
}

.hidden.revealed {
  display: block;
}
<a href="#" class="toggle"> Click Me For Toggling </a>

<p class="hidden"> I was hidden Initially </p>

user_184563720 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Help</title>
    <style>
        nav div{
    height:7px;
    background-color: white;
    margin: 5px 0;
    border-radius: 25px;
}

.menu {
    position: absolute;
    display:inline-block;
    text-align:center;
    right:130px;
    top:60px;
}

.unu {
    width: 45px;
 }
    
.doi {
    width: 20px;
}
    
.trei {
    width:35px;
}

.sm {
    display: none;
}
.show {
    display:block;
}
</style>
</head>
<body>

<div class="menu">
  <a href="#">
  <div class="unu">lll</div>
  <div class="doi"></div>
  <div class="trei"></div>
  </a>
 <div class="sm">
   <a href="#">FAQ</a>
   <a href="#">Support</a>
   <a href="#">Features</a>
 </div>
</div>
<script>

    var show  = document.querySelector("a")
    var x = document.querySelector(".sm")
    show.addEventListener('click',()=>{
        x.classList.toggle("show")
    })
    
</script>

</body>
</html>

I made a lot of changes! You first I use Js Vanilla j. I relied on the "click" event on the "a" tag By leaving your function in the link, it works but, once it appears, it disappears by itself again. Which means it doesn't overwrite the display property that was in the class sm. In short, it works well; you can check on snipett

user_171581600
Related