The toggler button is sliding down the list, but unfortunately, it's not causing the list to collapse

I have successfully copied all the necessary links and implemented the toggler code from bootstrap v5.1. The menu opens when I click on the toggler, but it does not collapse when I click on it again. This code works fine in the bootstrap document but encounters issues in the browser. Below is the code snippet:

<html>
 <head> 
  <title>Toggler</title>   
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fce8e5edeceae9fdf0cbeac9dfdfe3df">[email protected]</a>/dist/css/bootstrap.min.css" 
   rel="stylesheet" integrity="sha384- 
     ... (omitted for brevity) ...
        </li>
       </ul>
       <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
       </form>
      </div>
     </div>
    </nav>   
   </body> 
  </html>
javascripthtmlcssbootstrap-5

Answer №1

I believe the issue stemmed from a script import problem.

Here is the code that successfully ran on my device:

<html>
 <head> 
  <title>Toggler</title>   
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="60020f0f14131412011020554e514e53">[email protected]</a>/dist/css/bootstrap.min.css" 
   rel="stylesheet" integrity="sha384- 
   1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">  
 </head>
 <body>
  
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="SupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="SupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>
  
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="64070b160124564a5d4a56">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7b1914140f080f091a0b3b4e554b5549">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</body> 
  </html>

https://i.sstatic.net/eS2D8.png

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

"Threads snap as soon as they begin to be put to use

Encountering an issue with the command yarn run serve, the error log states: $ vue-cli-service serve INFO Starting development server... 10% building 2/2 modules 0 activeevents.js:173 throw er; // Unhandled 'err ...

javascriptnode.jsvue-cli

What is the best way to input an argument into my Javascript code using the command line?

Whenever I run my JavaScript file called "login.js" from the command line using "node login.js", I find it necessary to manually edit the URL inside the file if I want to change it. It would be more convenient for me if I could pass the URL as a command l ...

javascriptnode.jscommand-linepuppeteer

What is the best method to trigger a bootstrap modal window from a separate component in Angular 8?

I have successfully implemented a bootstrap modal window that opens on a button click. However, I am now facing difficulty in opening the same modal window from a different component. Below is the code I have tried: <section> <button type=&quo ...

javascriptangulartypescriptbootstrap-4modal-dialog

Is it conceivable that Rails may be rendering HTML at a slower rate compared to static

When using a Rails layout, you can include HTML tags to render images like this: <%= image_tag("logo.png", :alt => "Sample App", :class => "round") %> This will generate the following HTML code: <img alt="Sample App" class="round" src="/i ...

htmlruby-on-railsrubylayoutrendering

associating functions with various events that require arguments

I am working with two event listeners that trigger separate functions, but I believe it might be more efficient to have them trigger the same function instead. These event listeners are monitoring keystrokes and the mouse wheel. $(document).mousewheel(on ...

javascriptjqueryhtml

What is causing my AJAX function to malfunction and throwing an exception for undefined data objects?

I am having trouble with my ajax query in my code. Even though it is returning the required data, it is not displaying properly within the HTML code. I have a common header and footer (PHP) for all other files. Despite my efforts to resolve this issue by s ...

javascripthtmljqueryajax

The `introJs()` API encounters issues when connected to an element within a jQuery modal dialog box

I am attempting to showcase an Intro.js tour on a specific element located within a <table>. This particular <table> is nested inside a dialog box created using jQuery UI. The rows of the table are dynamically inserted using JavaScript: while ...

javascripthtmljqueryintro.js

Confused by loops? I could use some assistance

I'm having trouble figuring out how to make this JavaScript code block repeat itself. This code is for a code-operated Phidget switch that controls an electronic relay by turning it on and off with a timer for a specific duration. The "Phidget22" Node ...

javascriptloopsrepeat

Chrome successfully processes Ajax request, but Firefox encounters failure

I've encountered a peculiar issue with a JavaScript function that is responsible for making an Ajax call to a PHP page for database transactions and data processing. Take a look at the function below: function processQuizResults() { console.log(" ...

javascriptjqueryajaxgoogle-chromefirefox

Issues have been reported with the compatibility of Tailwind CSS when using it with Next.js and Shadow

I've been working on a NextJS project that utilizes shadcn-ui components. However, upon integrating tailwindCSS, I encountered an issue where none of the styling appeared when using classnames. I have double-checked the configurations in components.j ...

javascriptuser-interfacenext.jstailwind-cssshadcnui

Learn how to collapse a list by clicking outside of it on the document with the following code: $(document).on("click"

I want to create a collapsible/expandable menu for my website. I had a version where hovering over a category would expand the subcategory, but what I really need is for the subcategories to expand when I click on a category and remain expanded until I cli ...

javascripthtmlcss

Upload an image converted to `toDataURL` to the server

I've been attempting to integrate the signature_pad library, found at signature_pad, but I am struggling to grasp its functionality. Can someone guide me on how to retrieve an image value and send it to my server? Edit: I have experimented with dec ...

javascriptajaxposttodataurl

Finding the correct path for ts-loader with webpack version 2.2.1 within a script

When running the gulp task below, I encounter an error: Module not found: Error: Can't resolve 'app.ts' in 'wwwroot/js/admin' gulp.task("admin:js", function (done) { module.exports = { context: "wwwroot/js/admin", ...

javascriptnode.jswebpackgulpwebpack-2

Position the Close Button within the CSS Cookie Consent Popup in perfect alignment

Having trouble aligning the close X button in my cookie consent popup to the center? I added a margin-top to adjust it, but I'm looking for a better solution. <div class="alert cookiealert" > By using our website you agree to our C ...

htmlcsscookiesbootstrap-4cookieconsent

Stopping animation in jQuery function before it starts

After each update, a function is executed: window.ticker.client.updateData = function (data) { try { if (viewModelOrder.selectedInstrument == data.symbol) { viewModelOrder.updatePrice(data.ask.to ...

javascriptjquery

What is the process for updating the background image in Ionic?

Currently facing an issue with setting an image for background in Ionic. The code provided doesn't seem to be working as expected. It appears that the style sheet is not being applied correctly. Not sure where exactly to add the style sheet or how to ...

htmlcssionic-framework

Getting the text from an element in Protractor that does not have a class or id

I am facing an issue with retrieving text from an element that does not have a class assigned to it. Below is the HTML code snippet: <div><em>Min Amount Required is 150,000</em></div> This is my page object: var minAmount = el ...

javascriptnode.jsprotractoraureliae2e-testing

What is the reason for React's progressive bar displaying the complete percentage instead of progressively increasing it?

I am attempting to update the percentage state by adjusting setTimeout during the page load process, causing the filler to gradually fill the progressiveBar up to 100%. const { React, ReactDOM } = window const { useEffect, useState, Fragment } = React c ...

javascriptreactjs

What is the method for retrieving data from the root component within a child template in VueJs?

How can I access this.$root from within a VueJs template? For example: <template> <v-card elevation="this.$root.$refs.foo.cardElevation"> Foo </v-card> </template> I am aware that I can create a data property and ...

javascriptvue.jsvuejs2

Automate the processing of string input into an input field

I realize that this question has been raised numerous times before. However, the previously suggested solutions are no longer effective. I am attempting to automate a form by simulating key presses. For example, when I try: document.getElementById(" ...

javascriptinput