Toggle Animation Function on JavaScript not working

December 30, 2021

Hey guys I’m trying to build a website which includes a feature that toggles a side bar when the hamburger icon is clicked yet it doesn’t seem to work. all my CSS tags linked to the JavaScript are correct. I just want you guys to look at my JavaScript code if it is right.


$(document).ready(function(){
 

  $('.menu-btn').click(function(){
      $('.navbar .menu').toggleClass('active');
    });

}); ```

>Solution :

You may not have defined the jQuery reference. After reviewing the sample application below, you should submit a more detailed bug report.

$(document).ready(function() {
    $("#menu-btn").click(function(e) {
        e.stopPropagation();
        e.preventDefault();
        $(this).toggleClass("active");
        $(".menu ul").toggleClass("active");
    });
});

.toggle-nav{
    margin-left: 7px;
}

.menu ul.active {
    display: none;  
}

.menu ul {
    position: absolute;
    top: 20%;
    padding: 10px 20px;
    background: #F0F0F0;
}

.menu li {
    margin: 5px 0px 5px 0px;
    float: none;
    display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="menu">
    <button id="menu-btn" class="toggle-nav">Toggle</button>

    <ul class="active">
        <li><a href="#">First</a></li>
        <li><a href="#">Second</a></li>
        <li><a href="#">Thirth</a></li>
    </ul> 
</div>