CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Chris Rousey
Chris Rousey

Reputation: 3

CSS accordion menu button

hoping to find some help here since i'm new to webdesign. Just wondering why my accordion button isn't working? When clicking inside the .container, it should run my animation and display my <ul>. Right now the animation works, but i can't seem to manipulate my CSS and change display:block to display:none.

.container {
  display: inline-block;
  cursor: pointer;
}

.bar1,
.bar2,
.bar3 {
  width: 35px;
  height: 5px;
  background-color: #000000;
  margin: 6px 0;
  transition: 0.4s;
}

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  -moz-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
}

.change .bar2 {
  opacity: 0;
}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  -moz-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
}

.links {
  float: left;
  margin-left: 15%;
  display: none;
}
<html>

<head>

  <script>
    function myFunction(x) {
      x.classList.toggle("change");
    }
  </script>
  <script>
    var acc = document.getElementsByClassName("container");
    acc.onclick = function() {
      var panel = getElementsByClassName("links");
      if (panel.style.display === "block") {
        panel.style.display = "none";
      } else {
        panel.style.display = "block";
      }
    }
  </script>

</head>

<body>
  <div class="container" onclick="myFunction(this)">
    <ul class="links">
      <li><a href="#skills"><span>Skills</span></a></li>
      <li><a href="#about"><span>About</span></a></li>
      <li> <a href="#contact"><span>Contact</span></a></li>
    </ul>
    <div class="bar1"></div>
    <div class="bar2"></div>
    <div class="bar3"></div>
  </div>
</body>

</html>

Upvotes: 0

Views: 138

Answers (2)

Deepu Reghunath
Deepu Reghunath

Reputation: 9663

This may helpful

.container {
  display: inline-block;
  cursor: pointer;
}

.bar1,
.bar2,
.bar3 {
  width: 35px;
  height: 5px;
  background-color: #000000;
  margin: 6px 0;
  transition: 0.4s;
}

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  -moz-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
}

.change .bar2 {
  opacity: 0;
}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  -moz-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
}

.links {
  float: left;
  margin-left: 15%;
  display: none;
}
<html>

<head>

 
  <script>
    var acc = document.getElementsByClassName("container");
     function myFunction(x) {
       x.classList.toggle("change");
      var panel = document.getElementById("links");
      console.log(panel.style.display);
      if (panel.style.display === "block") {
        panel.style.display = "none";
      } else {
        panel.style.display = "block";
      }
    }
  </script>

</head>

<body>
  <div class="container" onclick="myFunction(this)">
    <ul id="links" class="links">
      <li><a href="#skills"><span>Skills</span></a></li>
      <li><a href="#about"><span>About</span></a></li>
      <li> <a href="#contact"><span>Contact</span></a></li>
    </ul>
    <div class="bar1"></div>
    <div class="bar2"></div>
    <div class="bar3"></div>
  </div>
</body>

</html>

Upvotes: 0

Gerardo BLANCO
Gerardo BLANCO

Reputation: 5648

I find jQuery sintaxis a lot easier.

Hope it helps

$('.container').click(function(){
      var panel = $('#links');

      if (panel.css('display') === "block") {
        panel.css('display',"none");
      } else {
        panel.css('display',"block");
      }
})
.container {
  display: inline-block;
  cursor: pointer;
}

.bar1,
.bar2,
.bar3 {
  width: 35px;
  height: 5px;
  background-color: #000000;
  margin: 6px 0;
  transition: 0.4s;
}

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  -moz-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
}

.change .bar2 {
  opacity: 0;
}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  -moz-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
}

.links {
  float: left;
  margin-left: 15%;
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<html>

<head>

  <script>
    function myFunction(x) {
      x.classList.toggle("change");
    }
  </script>
</head>

<body>
  <div class="container" onclick="myFunction(this)">
    <ul class="links" id="links">
      <li><a href="#skills"><span>Skills</span></a></li>
      <li><a href="#about"><span>About</span></a></li>
      <li> <a href="#contact"><span>Contact</span></a></li>
    </ul>
    <div class="bar1"></div>
    <div class="bar2"></div>
    <div class="bar3"></div>
  </div>
</body>

</html>

Upvotes: 1

Related Questions