Issue with Bootstrap 5 Dropdown not toggling back

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Creative Admin Panel</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="dropdown dropdown-center">
      <button class="btn btn-outline dropdown-toggle rounded-3" type="button" data-bs-toggle="dropdown" aria-expanded="false">  User Settings </button>
        <ul class="dropdown-menu">
           <li><a class="dropdown-item active" href="#">Profile</a></li>
           <li><a class="dropdown-item" href="#">Settings</a></li>
           <li><a class="dropdown-item" href="#">Logout</a></li>
       </ul>
 </div>

  <script src="https://unpkg.com/@popperjs/core@2"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
</body>

I have been struggling with my Bootstrap 5 dropdown not collapsing back despite numerous attempts to resolve the issue.

javascriptdrop-down-menubootstrap-5

Answer №1

You currently have Bootstrap script loading twice on your page, resulting in a conflict.

To resolve this issue, take out the redundant script tag:

    <head>
        <!-- Exclude this line -->    
        <!--<script src="bootstrap/js/bootstrap.min.js"></script>-->
    </head>
    <body>

    
        <script src="bootstrap/js/bootstrap.min.js"></script>
    
    </body>

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

Pug does not have access to computed properties within the dynamic class attribute of a Vue component

After attempting to dynamically toggle the className based on computed property and encountering issues in Pug, I found that manually setting 'true' to a className was the solution. Even after trying to reassign the computed property to a Pug var ...

javascriptvue.jspug

React doesn't have file upload configured to update the state

I am working on integrating a file upload button that sends data to an API. To ensure only the button triggers the upload dialog and not the input field, I have set it up this way. Issue: The File is not being saved to state, preventing me from using a ...

javascriptreactjstypescriptfile-upload

Unexpected appearance of a blue line in Material UI when the overflow attribute is included

For my React application, I've integrated Material-UI along with styled components. The strange thing is that when I use a Chrome browser to view the app, I encounter an issue that doesn't seem to happen in Firefox. The problem arises when I add ...

javascriptreactjsgoogle-chromematerial-ui

Utilizing Rollup to Bundle a Collection of React Components

I am diving into the world of bundling as I update a compact React component library internally powered by Rollup. Current Status Currently, all components are bundled into a single index.js file. When I import one or more... import { Button, Input } fr ...

javascriptreactjsbundling-and-minificationrolluptree-shaking

Best practice for managing asynchronous calls and returns in TypeScript

I’ve recently started working on an Ionic 4 project, delving into the realms of Javascript / Typescript for the first time. Understanding async / await / promise seems to be a bit challenging for me. Here’s the scenario: In one of the pages of my app ...

javascripttypescriptpromise

Retrieve the content from paragraph elements excluding any text enclosed within span tags using the Document.querySelector method

Exploring the following element structure: <p> <span class="ts-aria-only"> Departure </span> RUH <span class="ts-aria-only">&nbsp;Riyadh</span> </p> In an attempt to extract the text RUH, it has been disc ...

javascriptnode.jspuppeteer

Utilize React JS to dynamically render JSON array of images onto a JSX page in React

state = { products: [ { img: "'./images/heartstud.jpg'", name: "Heart Earrings", price: "1.99", total: "3.98", count: 2, description: "Yellow Chimes Crystals from Classic Designer Gold Plated Styl ...

javascriptjsonreactjsimagewebpack

Whenever I adjust the layout of the navigation bar, the edges end up getting clipped

I'm having trouble with the border shape of my navbar. When I try to make it a rounded pill shape, the edges get cut off instead of being properly displayed. https://i.stack.imgur.com/sUN2Y.png Below is the HTML template: <template> <div cl ...

javascriptcssvue.jsbootstrap-4bootstrap-5

Displaying AngularJS content as text in an HTML file

I have been learning from the AngularJS Tutorial on Code School, but I'm experiencing an issue where my JavaScript code is not rendering properly in the HTML. Below is the snippet of HTML code: <html ng-controller="StoreController as store"> & ...

javascripthtmlangularjs

Refreshing Rails Views by Periodically Polling the Database

We are currently developing a statusboard to monitor all our external servers. Our database contains information about OS, software versions, and other details that are subject to frequent updates. To ensure real-time visibility of these changes on the web ...

javascriptjqueryruby-on-railsajaxpolling

Building a ReactJS application that displays an array of images with a distinct pop-up feature for each image

Having trouble creating unique popups for each image in React. I have a set of 20 images that should be clickable, with only one popup open at a time, each containing text and an image. Currently mapping out the images from an array. Looking for assistan ...

javascriptarraysreactjspopupgatsby

Tips for setting up a range slider for decimal numbers

I have implemented the following code for a range slider. It works perfectly fine for integer values like 1 and 100, but I am facing issues when trying to use decimal values. I attempted to substitute 1 with 0.1 but it did not yield the desired result. ...

javascriptjquery

The dimensions of the d3 div remain constant despite any modifications to its attributes

In my angular application, I am trying to customize the width and height of div elements in d3 when I select a legend. Strangely, I am able to adjust the width and height of the svg element without any issues. Here is the issue illustrated: https://i.ssta ...

javascriptangulartypescriptd3.js

SEO Optimized pagination for pages without modifying the URL

On my website, I utilize pagination to navigate to various event pages. However, search engines are not picking up the conferences on these pages. Take a look at the code snippet below... <a href="javascript:;" class="first" title="First" onclick="getC ...

javascriptajaxpaginationseo

JQuery - Triggering mouseenter/hover event only on top-level menu items, excluding the nested submenu items (list items that are not within nested lists)

I have a complex navigation menu structure with nested lists, and I'm struggling to trigger an event only on the top-level items when hovered. Despite trying different jQuery selectors and methods, such as using the NOT selector or targeting direct ch ...

javascripthtmljquerycss

What is the best way to retrieve the following database results after clicking a button with Node.js?

Currently, my Node.js setup is successfully connected to my webpage and pulling data from a MySQL database. I have managed to display the first row of data as button values in the HTML code below. However, what I now want is for the user to be able to cl ...

javascriptmysqlnode.jsexpress

A guide to successfully interacting with multiple elements simultaneously at a single spot

Within my graphic chart, I have various dots that may be located in the same spot. I am looking for a way to handle clicks on two or more elements simultaneously in Vue 3. Do you know of any straightforward methods to achieve this? I attempted using refs ...

javascriptvue.jsvuejs3

Start the CSS3 animation in reverse right away

I am trying to achieve a "flashing" effect by adding the .shown class to my #overlay, causing the opacity to fade in for 2 seconds and then immediately reverse, fading out for another 2 seconds. After experimenting with removing the class, I found that it ...

javascripthtmlcss

I have my server running on port 6666. I am able to receive a response from Postman, however, when I attempt to access localhost:6666 in my browser, it displays a message

[image description for first image][1] [image description for second image][2] [image description for third image][3] There are three images displayed, indicating that the server is operational and responding with "hello" in Postman, but there seems to ...

javascriptexpress

Issues with the HTML required attribute not functioning properly are encountered within the form when it is

I am encountering an issue with my modal form. When I click the button that has onclick="regpatient()", the required field validation works, but in the console, it shows that the data was submitted via POST due to my onclick function. How can I resolve thi ...

javascriptajaxformscodeigniterbootstrap-modal