I’m trying to show a gear icon and a dropdown menu when it is clicked.
Here’s my code, but the dropdown menu is not appearing.
Any ideas what am I doing wrong?
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- jQuery 3.4.1 -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!-- Bootstrap 3.4.1 CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- Bootstrap 3.4.1 JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!-- bootstrap icons from here: https://blog.getbootstrap.com/2021/01/07/bootstrap-icons-1-3-0/ -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">
</head>
<body>
<div class="dropdown">
<h4>
Drop down menu test: <i class="bi bi-gear" style="cursor: pointer;" data-toggle="dropdown"></i>
</h4>
<ul class="dropdown-menu dropdown-menu-right">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<!-- Add more menu items as needed -->
</ul>
</div>
</body>>Solution :
You have a few things not aligned with the docs and good semantic markup:
- A toggler should be a button. Headings are not clickable elements and shouldn’t be used as such, for accessibility.
- A dropdown menu must be the next sibling of its toggler. This means putting it inside the heading element. Unfortunately, this is also bad from a semantic perspective, so consider refactoring your layout to fix that.
- Don’t omit the ARIA attributes shown in the docs, also for accessibility.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- jQuery 3.4.1 -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!-- Bootstrap 3.4.1 CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- Bootstrap 3.4.1 JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!-- bootstrap icons from here: https://blog.getbootstrap.com/2021/01/07/bootstrap-icons-1-3-0/ -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">
</head>
<body>
<div class="dropdown">
<h4>
Drop down menu test: <button id="dropdownBtn" class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"><i class="bi bi-gear"></i></button>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownBtn">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</h4>
</div>
</body>