hide element on click hide element

Question

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" );
});
});

Class selectors are preceded by a dot as in .c-hamburger. jquery has very nice documentation api.jquery.com/category/selectors — Jeremy Cook
– Jeremy Cook, Commented Jan 12, 2017 at 23:33
I am confused as to what click function you are trying to bind to. — Learning2Code
– Learning2Code, Commented Jan 12, 2017 at 23:34
In your fiddle the javascript settings (the gear icon) is not including jQuery — the "FRAMEWORKS & EXTENSIONS" field says "No-Library (pure JS)" so nothing will work. Fix that, you then have to change your JS so the selector is .hamburger not c-hamburger, and change $('this') to $('ul') ... which, after both your question and Caelan's answer were edited, both now do. Your question now asks "what's wrong with this" about code that is correct, making the question moot. You should either restore your bad code in the question, since that was the problem, or delete the question. — Stephen P
– Stephen P, Commented Jan 13, 2017 at 0:13

Searching · Accepted Answer · 2017-01-12 23:47:06Z

1

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;
}

answered Jan 12, 2017 at 23:47

Searching

2,2791 gold badge17 silver badges28 bronze badges

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

1 Comment

Searching Over a year ago

thats because jquery is not loaded. try the JAVASCRIPT setting and change framework and extensions to jquery

GROVER. · Accepted Answer · 2017-01-12 23:55:45Z

1

Give this a shot!

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

edited Jan 12, 2017 at 23:55

answered Jan 12, 2017 at 23:38

GROVER.

4,4082 gold badges31 silver badges78 bronze badges

3 Comments

tom harrison Over a year ago

also doesn't seem to work on my fiddle unless i'm missing something

GROVER. Over a year ago

@tomharrison, try the updated version. Although I couldn't seem to find a c-hamburger element?

tom harrison Over a year ago

sorry should be just hamburger have edited it now to reflect this

Collectives™ on Stack Overflow

hide element on click hide element

2 Answers 2

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related