CODEWITHSUNDEEP
javascriptjqueryhtmlcss
tom harrison
tom harrison

Reputation: 3423

hide element on click hide element

I'm trying to toggle the class 'show' on the ul so that it shows/hides the menu but my JQuery is not very good and I can't seem to get it to work

 <nav>
   <ul class="show">
     <li><a href="#sec01">about us</a></li>
    <li><a href="#sec02">how it works</a></li>
    <li><a href="#sec03">comments</a></li>
  </ul>
</nav>
<div class="hamburger"></div>
nav {position:relative; z-index:999; display:flex; height:70px; width:100%; background:none; @include centerer; font-weight:bold;font-family: 'Roboto', sans-serif;
@include small{background:#DADADA;}
@include xs {background:#DADADA;;}}
nav ul {display:flex; list-style:none; flex-direction:row;
    @include small{margin-top:160px;flex-direction:column;}
    @include xs{flex-direction:column;}}
nav li { padding:20px; text-transform: uppercase; 

    @include small{background:#fff; color:#000}
    @include xs{background:#fff; color:#000;}}
nav li:hover a {border-bottom:2px solid #ff0000;}

nav a,nav a:visited {  color:#fff;text-decoration: none;}
nav a:hover,nav a:active {color:#fff;   text-decoration: none; ; }
.show{
visibility:hidden;
}
.hamburger{position:absolute; z-index:999;top:10px; right:10px; height:50px; width:70px; background:#000;

https://jsfiddle.net/hsaw3frL/

$(document).ready(function(){
$( ".hamburger" ).click(function() {
  $('ul' ).toggleClass( "show" );
});
});

Upvotes: 0

Views: 116

Answers (2)

GROVER.
GROVER.

Reputation: 4378

Give this a shot!

$(document).ready(function(){
    $(".hamburger").click(function() {
        $("ul").toggleClass("show");
    });
})

Upvotes: 1

Searching
Searching

Reputation: 2279

There are quite a lot of ways to achieve what you are trying.

fix selection of class , add new css property .hide , fix/update the ul element by giving it an id (you don't want to hide all ul elements)

html 

 <ul id='menubar' class="show">

script

$(document).ready(function() {
  $(".hamburger").click(function() { 
    $('#menubar').toggleClass("hide");//toggle this class
  });
});

css

.hide{
display: none !important;
}

Upvotes: 1

Related Questions