Conceal the menu by pressing the button

I'm having trouble with a bootstrap drop-down feature. When the button is clicked, the menu appears, but clicking the button again doesn't hide the menu as intended. I've attempted a method that didn't work and I believe there must be a better way to achieve this functionality. How can I make the menu hide when the button is clicked? Any help would be appreciated.

$('.dropdown button').on('click', function() {
  if ($(this).attr('class').split(" ").pop() == 'show') {
    //not working menu is getting hidden before shown
    $(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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b4d6dbdbc0c7c0c6d5c4f4819a859a87">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bedcd1d1cacdcaccdfcefe8b908f908d">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f2909d9d868186809382b2c7dcc3dcc1">[email protected]</a>/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>

htmljquerycssbootstrap-4

Answer №1

Do you favor utilizing the "toggle" option instead?

   $(function () {
      $("button").click(function () {
      $(".dropdown-menu").toggle();
  });
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issues with internal linking in TYPO3 are causing anchor tags to malfunction

When creating an internal anchor, it is usually defined using <a name="anchorname">Introduction</a>. To link to this anchor, you would write something like <a href="#anchorname">Top</a>. In TYPO3, an anchor is a ...

htmlhyperlinkanchortypo3

Adding Angular directives to the DOM after the document has finished loading does not function properly in conjunction with ngAnimate

I've been working on developing an Angular service that can dynamically append a notification box to the DOM and display it without the need to manually add HTML code or write show/hide logic. This service, named $notify, can be used as follows: $no ...

javascriptjqueryhtmlcssangularjs

Text from the GET request is not being displayed in the textbox, although it is appearing in the div when using Jquery and Ajax

Currently, I have a webpage that features a text box which can be updated in real-time as the user types and is immediately saved to the database. Here is the code for my textarea: <textarea id="text"></textarea> My objective: If a user ope ...

javascriptjqueryajax

Retrieve input value in Angular 8 using only the element's ID

Can the value of an input be obtained in Angular 8 with TypeScript if only the element's id is known? ...

htmlangulartypescript

Top method for designing a "busy waiting" animation with customizable positioning using jQuery? (i.e., display it in the proximity of the activity)

I am planning to incorporate a busy waiting spinner on my website, following the method outlined in this post: How to show loading spinner in jQuery? - as it is considered the cleanest and simplest approach: $('#loadingDiv') .hide() / ...

javascriptjquerybusyindicator

Graphical representation of data using spider web pattern in JQuery

Can someone provide guidance on creating a Spider Web Chart using JQuery in ASP.Net? I am looking for assistance on how to implement this feature. ...

asp.netjquery

Connecting CSS styles and images to my EJS templates on a distant Express server using Node.js (Ubuntu 18.04)

I have been hunting for a solution here extensively, but every attempt has failed. So, here's the issue I'm facing: I have created a basic Express server locally to display a static page until I finish full integration. The structure of my site ...

cssnode.jsexpressejsbad-gateway

The input field cannot be accessed via touch on mobile devices

<div class="form-group row pswrd" style="padding: 0px 10px"> <div id="email" class="col-md-12 col-xs-12"> <input type="password" class="form-control c_fname" id="c" #pswd name="password" placeholder="password" [(ngModel)]="user.passwor ...

htmlcssangular

Is there a way to incorporate a deletion feature within a list of items using JavaScript?

When adding a new item, I want to include a delete button next to it so I can easily remove the item by clicking on the button. However, I am having trouble figuring out how to implement this functionality using JavaScript. You can view my code snippet he ...

javascripthtmlcss

Utilizing jQuery to apply a class to a targeted element when clicked

I'm currently working on animating a menu item where it expands to the left when hovered over, and contracts back when the mouse moves out. This part is functioning as expected. Additionally, I am trying to apply a specific color to the button by add ...

javascriptjquerycss

Implementing Ajax to display autocomplete suggestions in an HTML table

I've been working on implementing an ajax auto complete function into my HTML code. My goal is to display the results from the auto complete function in a table on the html page. Although the auto complete function is working and I can see the drop do ...

htmlajax

JavaScript is incapable of locating image files

I am encountering Resource Not Found errors for the image files I am attempting to load into var manifest. Despite following the tutorial code closely, I can't seem to identify what is causing this issue... (function () { "use strict"; WinJS.Bin ...

javascripthtmlwindows-8

What is the best way to store a nested dropdown menu in Laravel 8?

I have a complex nested dropdown menu that is populated with data from a database. I am facing issues with obtaining the ID of the selected data and enabling multi-select functionality. Without the ability to retrieve the corresponding ID, multi-select is ...

phplaravelbootstrap-4laravel-8

Embedding HTML in a Xamarin Forms Label

I am currently developing a mobile app for my website using Xamarin Forms. One of the challenges I am facing is styling HTML content stored in a database field. Although I am utilizing https://github.com/matteobortolazzo/HtmlLabelPlugin, I am struggling t ...

htmlxamarinxamarin.forms

Creating a clear distinction between a logo and accompanying text

I'm working with bootstrap 5 and I want to add a subtle line right after the logo.png below. The line should be directly connected to the logo with no spaces, and also no spaces between the text and the line. <!-- Bootstrap-5 --> <link hre ...

htmlcssbootstrap-5

Accessing Microsoft SQL Server Data in Cordova Application utilizing PHP

While I have experience creating simple mobile apps in Cordova, I am now looking to delve into the world of creating database apps. A database app for me means integrating MSSQL Server, HTML, and PHP. In my quest for information on this topic, I scoured v ...

phpjquerysql-serverajaxcordova

Add a class by utilizing the :class attribute

I reviewed the documentation, but I am still struggling to implement this in my project. Initially, I simply want to display a specific class using vue.js that I can later modify dynamically. I just need to establish the default behavior of that class, so ...

javascripthtmlcssvue.jsvuejs2

Can a PHP variable be passed along with a div ID in any way?

I am attempting to transfer a PHP value through the "href" attribute from one div to another. While we can achieve this between pages, like so: <a href="somepage.php?id=<?php echo $id;?>"></a> Is there a way to accomplish this using an ...

phphtmlcss

What steps do I need to take in order to develop a custom interactive analyzer game using html/css

Hello there, I am on a mission to develop a mobile-friendly version of an analyzer game that I came across on this link - . The current version of the game is built using flash. My goal is to be able to easily customize the colors and images to fit differ ...

javascriptjqueryhtmlcss

CSS - Ensure the parent stays open and the submenu remains highlighted upon selection

I have integrated a CSS Vertical menu with submenus into an ASP.Net application on the master page. Clicking on each menu item directs to different aspx pages. However, when clicking on a submenu within an expanded parent menu, the page redirects as expect ...

javascriptjqueryasp.netcssmaster-pages