Hide menu on click of button - html

Question

I have a bootstrap drop-down. What I'm trying to achieve is once you click on the button the menu appears but when you click on the button again the menu doesn't hide. I want the menu to hide on click of the button. The method I tried didn't work and I think there should be a more suitable way to hide the menu on click of the button. How can I achieve this? Thanks in advance.
$('.dropdown button').on('click', function() {
if ($(this).attr('class').split(" ").pop() == 'show') {
//not working menu is getting hidden before showen
$(this).parents('.dropdown').find('ul').hide()
}
});
.dropdown {
margin-left: 40%;
}
.dropdown-menu {
transform: translate(calc(-50% + 20px), 40px) !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.0.0/css/all.css" integrity="sha384-3B6NwesSXE7YJlcLI9RpRqGf2p/EgVH8BgoKTaUrmKNDkHPStTQ3EyoYjCGXaOTS" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<div class="dropdown">
<button class="btn btn-secondary" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fa-solid fa-bell"></i>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item">option 1</a></li>
<li><a class="dropdown-item">option 2</a></li>
<li><a class="dropdown-item">option 3</a></li>
</ul>
</div>

Answer 1

Would you prefer using the "toggle" instead?
$(function () {
$("button").click(function () {
$(".dropdown-menu").toggle();
});
});