Clever Geek Handbook

Switch to hidden div?

I would like it to #profile-menu

start like .hidden

, and when the user clicks .profile-toggle

it should remove or add the class .hidden

. How can I make this work in jQuery?

Here's what I've tried.

HTML:

<div class="main">
    <div class="container">
        <div class="nav-bar">
            <button class="profile-toggle" type="button" data-toggle="dropdown">Profile</button>
           <button type="button">Sign up</button>
        </div>
    </div>
</div>

<ul class="side">
    <li id="profile-menu" class="hidden">TOGGLE THIS MATE</li>
</ul>

JavaScript:

$(".profile-toggle").click(fucntion() {
    if ($(".side li#profile-menu").is(".hidden")) {
        $(".side li#profile-menu").removeClass("hidden");
        $(".side li#profile-menu").addClass("show");
    }
    else { 
        $(".side li#profile-menu").addClass("hidden");
        $(".side li#profile-menu").removeClass("hidden");
    }
});
+3


source to share


3 answers


There function

is a spelling error (you have fucntion

) but it can be simplified to



jQuery(function($) {
  $(".profile-toggle").click(function() {
    $("#profile-menu").toggleClass("hidden show")
  });
})
      

        
        
        
      

    
.hidden {
  display: none;
}
      

        
        
        
      

    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class="profile-toggle">profile-toggle</button>
<ul class="side">
  <li id="profile-menu" class="hidden">TOGGLE THIS MATE</li>
</ul>
Run codeHide result


+2


source


jQuery has a function called .toggleClass ()

Just use:



$(".side li#profile-menu").toggleClass("hidden");
+3


source


Remove the class and add style or define the class as -

.hidden {display: none;}

Html

<ul class="side">
     <li id="profile-menu" style="display:none;">TOGGLE THIS MATE</li>
</ul>

Use toggle()

.

$(".profile-toggle").click(fucntion() {
     $(".side li#profile-menu").toggle();
});
0


source






More articles:


All Articles