When I click the toggler button, the collapse menu fails to close

I created a responsive menu using Bootstrap 4.0.0. The collapsible menu works by opening when clicked, however, it does not close when clicked again. Here is the code:

html:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a href="index.php"><img class="nav-link" src="wp-content\themes\VillanovaTheme\img\home.svg"
            id="homeimage"></a>
    <button id="bottone" class="navbar-toggler js-scroll-trigger" type="button" data-toggle="collapse"
        data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
        aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link js-scroll-trigger" href="#1">Highlight Places and Prominent Personalities</a>
            </li>
            <li class="nav-item active">
                <a class="nav-link js-scroll-trigger" href="#2">Cultural and Gastronomic Events</a>
            </li>
            <li class="nav-item active">
                <a class="nav-link js-scroll-trigger" href="#3">Accommodation Facilities in Villanova di Camposampiero Territory</a>
            </li>
            <li class="nav-item active">
                <a class="nav-link js-scroll-trigger" href="#4">Services</a>
            </li>
            <li class="nav-item active">
                <a class="nav-link js-scroll-trigger" href="#5">Contact Information</a>
            </li>
        </ul>
    </div>
</nav>
javascripthtmlcssbootstrap-4

Answer №1

The issue was resolved when I decided to eliminate jquery and popper.js from the code.

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

How to extract precise text from HTML with JavaScript

In my exercise list written in Latex inside strings, I created a php script to generate exercises using: <button type = "button" onclick = "aggiornaInfo()">Save</button> <?php $exercises = array( ...

javascriptphphtml

Promisify Readline in Node.js

Is it feasible to utilize promisify (found at this link) with the readline module in node.js? The current approach I have is shown below: let data = []; const parse = () => { return new Promise((resolve, reject) => { const rl = readli ...

javascriptnode.jspromise

Angular UI Router allows for the resolution of data before a state

When working on my angular sample route, I attempted to achieve the following: (function(angular){ 'use strict'; angular .module('appRouter',['ui.router']) .controller('routerCtrl',function( ...

javascriptangularjsangular-ui-router

How can I conceal the element that came before in JavaScript?

<div onclick="toggleContent(this)" class="iptv"><div class="triangle"></div><b>LUZ HD</b> - 98 channels (including 32 HD channels) <div class="iptv_price"><b><img src="img/rj45.png" class="icon_ofert ...

javascript

error encountered during module import in Ember.js

I am struggling with removing diacritics from a string in my Ember.js app. After discovering the 'fold-to-ascii' plugin on GitHub, I added it to my project using npm. Although the plugin is visible under the node_modules folder, I'm unsure o ...

javascriptember.jspluginsnpmrequire

Struggling to increment the badge counter in a React Typescript project

I'm a bit unsure about where to apply the count in my Badge Component. The displayValue should include the count, but I'm struggling with how to implement it. UPDATE: The counter is now in place, but when I decrease the count and it reaches 0, t ...

javascriptreactjstypescript

I am interested in extracting information from a website by utilizing PHP

Can data be scrapped from a website using PHP without the use of any external tools? I attempted with the following code, but it proved to be insufficient: <?php $url = 'http://www.example.com'; $output = file_get_contents($url); echo $output ...

phphtml

What is the process for transforming fetch() into XML HTTP Requests?

In my code, I originally used fetch(), but for my specific situation, using XMLHttpRequest() would be more suitable. However, I am struggling to convert the code to utilize XMLHttpRequest(). This is the original fetch() code: fetch("file.wasm") ...

javascriptxmlhttprequestfetch-api

jqGrid is throwing an error: undefined is not recognized as a function

Currently, I am in the process of trying to display a basic grid on the screen. Following the instructions provided in the jqGrid wiki, I have linked and created scripts for the required files. One essential css file, jquery-ui-1.8.18.custom.css, was missi ...

javascriptjquerycssjqgrid

Is there a way to retrieve postmessage data from React?

I am attempting to embed a React URL within an iframe in my JSP project. Here is the code snippet from the sender side: <iframe id="eda" style="display: none;" src="http://myhost:3000/" width="100%" heig ...

javascriptreactjspostmessage

The timer will automatically refresh when the page is refreshed

Currently, I am encountering an issue while working on a quiz application in PHP. The problem arises when users start the test and the timer is running correctly. However, when users move to the second question, the timer resets again. Below is the code sn ...

javascriptphpjquery

Ways to display a specific section on an HTML page using AngularJS

Main page content <div class="row"> <div class="col-md-3"> link 1 link 2 link 3 . . . </div> </div> <div class="col-md-9"> <div ng-view></div> </div& ...

javascripthtmlcssangularjs

When working on a MEAN web application, encountering HTTP responses like 403 or 500 from the Express server can sometimes go unnoticed and not be properly handled in the errorCallback function within

Within my Node web app, there is a situation where an HTTP GET request is sent in one of the Angular controllers. At the same route defined in Express, somewhere in the route logic, an HTTP 500 response (also tried 403 Error) is also being sent. However, i ...

javascriptangularjsnode.jsexpress

I am encountering undefined values when utilizing momentjs within Angular

My project is utilizing angular and momentJS, with the addition of the angular-moment library. You can find my current progress in this fiddle However, I am encountering an error when trying to use moment in a controller method: TypeError: undefined is n ...

javascriptangularjsmomentjs

Leverage the ajax variable within HighCharts

I am retrieving data from MySQL using AJAX. However, I am facing an issue in using this data in HighCharts. Here is a brief overview of the situation: var Name; (function fetchData() { $.ajax({ url: './riza.php', ...

javascriptjqueryajaxhighcharts

What is the best way to transform an array of objects into an array that contains a distinct identifier in JavaScript?

I am currently working with an array of objects structured like this: { "data": [ { "id": 1, "from": "2022-08-01", "to": "2022-08-05", & ...

javascriptnode.jsarraysobjectduplicates

A step-by-step guide to showing images in React using a JSON URL array

I successfully transformed a JSON endpoint into a JavaScript array and have iterated through it to extract the required key values. While most of them are text values, one of them is an image that only displays the URL link. I attempted to iterate through ...

javascriptarraysreactjsjsonreact-hooks

The Chrome browser is not displaying the Ajax loader

I've been using a please-wait .gif image for my ajax loader, and it was working perfectly in Chrome until recently. There hasn't been any changes to the image itself, and it still displays correctly in IE, Mozilla, and other browsers. I'm p ...

htmlajaxdomajax-request

Is there a way to cancel an ongoing AJAX request?

My website will soon have a series of jQuery AJAX calls, and I need to create a function to abort these calls. Can anyone provide guidance on how to achieve this? I have already reviewed this particular link, but it did not work for me as expected. ...

javascriptjqueryajax

Jasmine - effectively mimicking an object that utilizes a constructor

Currently, I am attempting to simulate the native WebSocket in a jasmine test for Angular. I have successfully spied on the constructor and `send` function, but I am struggling to figure out how to fake a call of `onmessage`. The WebSocket has been extrac ...

javascriptangularjsunit-testingmockingjasmine