Bootstrap 5 Hamburger Animation not working

Question

SOLVED
Ok I solved the problem :)

The problem was:

$(function () {
    $('.navbar-toggler-button').on('click', function () {
  
      $('.animated-hamburger').toggleClass('open'); //Chrome expert mode says $ is not a function
    });
});

So I solved the problem with this:

jQuery(document).ready(function ($) {
    $('.navbar-toggler-button').on('click', function () {
  
      $('.animated-hamburger').toggleClass('open');
    });
});

I hope it helps another of you too :) Thanks for try to helping.

Question was:

I need help with some animations. I'm using Bootstrap 5 and I want to create a hamburger menu animation.

The following code snippets are from my webpage, but the animations don't work. The code snippets are sourced from: https://mdbootstrap.com/snippets/jquery/mdbootstrap/911054#html-tab-view

HTML CODE:

<nav id="navbar" class="navbar fixed-top navbar-expand-lg navbar-dark">
<div class="container-fluid container-fluid-mobile">
<jdoc:include type="modules" name="logo"/>
    
<button class="navbar-toggler navbar-toggler-button" type="button" data-bs-toggle="collapse" data-bs-target="#navigation"aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation">
<div class="animated-hamburger"><span></span><span></span><span></span></div>
</button>

<div class="collapse navbar-collapse" id="navigation">

<ul class="navbar-nav ms-auto mb-2 mb-lg-0 navbar-right nav-item">
<jdoc:include type="modules" name="navigation" onclick="toggleMenu() />
</ul>
<div class="collapse-show-bottom"></div>

</div>
</div>
</nav>

CSS Code:

.animated-hamburger {
    width: 30px !important;
    height: 20px !important;
    position: relative !important;
    margin: 0px !important;
    -webkit-transform: rotate(0deg) !important;
    -moz-transform: rotate(0deg) !important;
    -o-transform: rotate(0deg) !important;
    transform: rotate(0deg) !important;
    -webkit-transition: .5s ease-in-out !important;
    -moz-transition: .5s ease-in-out !important;
    -o-transition: .5s ease-in-out !important;
    transition: .5s ease-in-out !important;
    cursor: pointer !important;
}
    
.animated-hamburger span {
    display: block !important;
    position: absolute !important;
    height: 3px !important;
    width: 100% !important;
    border-radius: 9px !important;
    opacity: 1 !important;
    left: 0 !important;
    -webkit-transform: rotate(0deg) !important;
    -moz-transform: rotate(0deg) !important;
    -o-transform: rotate(0deg) !important;
    transform: rotate(0deg) !important;
    -webkit-transition: .25s ease-in-out !important;
    -moz-transition: .25s ease-in-out !important;
    -o-transition: .25s ease-in-out !important;
    transition: .25s ease-in-out !important;
}
    
.animated-hamburger span {
    background: #f3e5f5 !important;
}
    
.animated-hamburger span:nth-child(1) {
    top: 0px !important;
    -webkit-transform-origin: left center !important;
    -moz-transform-origin: left center !important;
    -o-transform-origin: left center !important;
    transform-origin: left center !important;
}
    
.animated-hamburger span:nth-child(2) {
    top: 10px !important;
    -webkit-transform-origin: left center !important;
    -moz-transform-origin: left center !important;
    -o-transform-origin: left center !important;
    transform-origin: left center !important;
}
    
.animated-hamburger span:nth-child(3) {
    top: 20px !important;
    -webkit-transform-origin: left center !important;
    -moz-transform-origin: left center !important;
    -o-transform-origin: left center !important;
    transform-origin: left center !important;
}
    
.animated-hamburger.open span:nth-child(1) {
    -webkit-transform: rotate(45deg) !important;
    -moz-transform: rotate(45deg) !important;
    -o-transform: rotate(45deg) !important;
    transform: rotate(45deg) !important;
    top: 0px !important;
    left: 8px !important;
}
    
.animated-hamburger.open span:nth-child(2) {
    width: 0% !important;
    opacity: 0 !important;
}
    
.animated-hamburger.open span:nth-child(3) {
    -webkit-transform: rotate(-45deg) !important;
    -moz-transform: rotate(-45deg) !important;
    -o-transform: rotate(-45deg) !important;
    transform: rotate(-45deg) !important;
    top: 21px !important;
    left: 8px !important;
}

JavaScript code:

$(function () {
    $('.navbar-toggler-button').on('click', function () {
  
      $('.animated-hamburger').toggleClass('open');
    });
});

Answer 1

just add JQuery libs to let the script work,

EDITED: added event to close menu after clicking outside.

here is an example;

$(document).ready(function() {
    $('.navbar-toggler-button').on('click', function() {
      $('.animated-hamburger').toggleClass('open');
    });
    
    $(document).click(function(event) {
      var tover = $(event.target);
    if ($('.animated-hamburger').hasClass('open') && !tover.hasClass('animated-hamburger')) {
    $('.animated-hamburger').toggleClass('open');
    }
    });

});

.animated-hamburger {
    width: 30px !important;
    height: 20px !important;
    position: relative !important;
    margin: 0px !important;
    -webkit-transform: rotate(0deg) !important;
    -moz-transform: rotate(0deg) !important;
    -o-transform: rotate(0deg) !important;
    transform: rotate(0deg) !important;
    -webkit-transition: .5s ease-in-out !important;
    -moz-transition: .5s ease-in-out !important;
    -o-transition: .5s ease-in-out !important;
    transition: .5s ease-in-out !important;
    cursor: pointer !important;
}
    
.animated-hamburger span {
    display: block !important;
    position: absolute !important;
    height: 3px !important;
    width: 100% !important;
    border-radius: 9px !important;
    opacity: 1 !important;
    left: 0 !important;
    -webkit-transform: rotate(0deg) !important;
    -moz-transform: rotate(0deg) !important;
    -o-transform: rotate(0deg) !important;
    transform: rotate(0deg) !important;
    -webkit-transition: .25s ease-in-out !important;
    -moz-transition: .25s ease-in-out !important;
    -o-transition: .25s ease-in-out !important;
    transition: .25s ease-in-out !important;
}
    
.animated-hamburger span {
    background: #f3e5f5 !important;
}
    
.animated-hamburger span:nth-child(1) {
    top: 0px !important;
    -webkit-transform-origin: left center !important;
    -moz-transform-origin: left center !important;
    -o-transform-origin: left center !important;
    transform-origin: left center !important;
}
    
.animated-hamburger span:nth-child(2) {
    top: 10px !important;
    -webkit-transform-origin: left center !important;
    -moz-transform-origin: left center !important;
    -o-transform-origin: left center !important;
    transform-origin: left center !important;
}
    
.animated-hamburger span:nth-child(3) {
    top: 20px !important;
    -webkit-transform-origin: left center !important;
    -moz-transform-origin: left center !important;
    -o-transform-origin: left center !important;
    transform-origin: left center !important;
}
    
.animated-hamburger.open span:nth-child(1) {
    -webkit-transform: rotate(45deg) !important;
    -moz-transform: rotate(45deg) !important;
    -o-transform: rotate(45deg) !important;
    transform: rotate(45deg) !important;
    top: 0px !important;
    left: 8px !important;
}
    
.animated-hamburger.open span:nth-child(2) {
    width: 0% !important;
    opacity: 0 !important;
}
    
.animated-hamburger.open span:nth-child(3) {
    -webkit-transform: rotate(-45deg) !important;
    -moz-transform: rotate(-45deg) !important;
    -o-transform: rotate(-45deg) !important;
    transform: rotate(-45deg) !important;
    top: 21px !important;
    left: 8px !important;
}

<!-- JUST ADD THIS LINE -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- ENDS HERE -->

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet">

<nav id="navbar" class="navbar fixed-top navbar-expand-lg navbar-dark">
<div class="container-fluid container-fluid-mobile">
<jdoc:include type="modules" name="logo"/>
    
<button class="navbar-toggler navbar-toggler-button" type="button" data-bs-toggle="collapse" data-bs-target="#navigation"aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation">
<div class="animated-hamburger"><span></span><span></span><span></span></div>
</button>

<div class="collapse navbar-collapse" id="navigation">

<ul class="navbar-nav ms-auto mb-2 mb-lg-0 navbar-right nav-item">
<jdoc:include type="modules" name="navigation" onclick="toggleMenu() />
</ul>
<div class="collapse-show-bottom"></div>

</div>
</div>
</nav>