Trying to update the +/- icon on an accordion dropdown, however, the local HTML file is not loading the JavaScript file. (Using Bootstrap 4)

I'm completely new to JS and struggling a bit, so please be patient. I've been searching online for a few days now without much luck. I'm using Bootstrap 4 and trying to create an accordion with a +/- icon that changes when expanded or collapsed. In essence, I want to replicate this demo: http://www.bootply.com/89084#

My basic JSFiddle almost works, but it doesn't collapse the opened accordion when a new one is clicked (bonus points if you can help me with that). https://jsfiddle.net/fufwwy7j/2/

However, when I try to load the HTML file locally, I get an error saying 'Uncaught ReferenceError: $ is not defined'. Could this be the root of the issue? Both the HTML and JS files are in the same directory, and the script tag in my <head> section looks like this: 

<script src="plusminus.js"></script>
.

javascripttwitter-bootstrapbootstrap-4

Answer №1

To include jQuery in your code, make sure to add a script tag that references it: How to Fix the Uncaught ReferenceError: $ is not defined error?

Answer №2

The scenario you referred to involves the utilization of bootstrap3. Consider linking bootstrap3 to your external resources or including them at the beginning of your HTML code like this

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>

Here is a functioning jsfiddle link https://jsfiddle.net/highestblue/hcq3wk1f/

If you prefer to use bootstrap4, you can refer to

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

Is there a way to utilize JavaScript and AJAX to save a WordPress cookie and log in a user, all without the need for any plugins?

My goal is to log in to WordPress using only ajax requests. Here's the code I have so far: var username = data.username; var password = data.password; var wp_login_url = "http://local_Ip/api/user/generate_auth_cookie/?username=" +username + "&pas ...

javascriptjqueryajaxwordpress

The button I have controls two spans with distinct identifiers

When I press the player 1 button, it changes the score for both players. I also attempted to target p2display with querySelector("#p2Display"), but it seems to be recognized as a nodeList rather than an element. var p1button = document.querySelector("# ...

javascripthtml

Stop the execution of the setTimeout function when the webpage loads in JavaScript

In my postgres database, I have a table named students for storing student information. The structure of the table is as follows: id first_name last_name time_remind 1 pers1 pers1_name 2022-07-30 21:30 2 pers2 pers2_name 2022-07-30 20:38 Current ...

javascriptphphtmllaravel

What advantages does the Step function (AWS) offer compared to setTimeout (Javascript) for scheduling tasks?

I am currently in the process of developing an API service that allows any client to provide me with their HTTP request along with the desired time in seconds for execution. I have considered two potential approaches to achieve this: Utilizing a lambda f ...

javascriptamazon-web-servicesaws-lambdaaws-step-functions

display the text from the template after selecting it (including both the text-field and value-field)

I'm currently utilizing BootstrapVue. In my b-form-select component, I display the name (as the text field) in the selection within my child.vue and emit the age (as the value field) to my parent.vue. This functionality is functioning as intended. H ...

javascriptvue.jsvuejs2bootstrap-vue

Can JavaScript bypass the need for an html page and go directly to the printing process?

Is it possible for a user to click a "print" button and have the printer start printing? Please note that there is already a server process in place (via AJAX) that can respond with success for printing or return HTML content for display, so that is not a ...

javascriptajaxprinting

Retrieve information from a JavaScript file to incorporate into an HTML file

Seeking a solution to store the base URL in a separate JavaScript file, I've implemented a JavaScript file named config.js containing: export const baseUrl = "https://example.com/"; There are multiple HTML files utilizing this base URL for ...

javascripthtml

How to deactivate a text box within a form that is dynamically generated using Angular

I have encountered an issue with disabling the textbox inside my dynamic form in AngularJS after clicking a button. My code works perfectly fine for disabling textboxes outside the dynamic form, but when I try to target the ID of the textbox within the dyn ...

javascriptjqueryangularjsdisabled-input

Challenges arise when incorporating interfaces within a class structure

I created two interfaces outside of a class and then proceeded to implement them. However, when I tried to assign them to private properties of the class, something went wrong and I'm unable to pinpoint the issue. Can anyone offer assistance with thi ...

javascripttypescript

The issue with Node.js router failing to process delete requests

My Node.js router is handling all methods well except for the DELETE method. I can't figure out why the delete request does not reach the router. The AJAX request seems to be functioning correctly. AJAX request: function ajaxHelper(url, onSuccessAr ...

javascriptnode.jsajaxexpress

What is the best method for uploading images and form content simultaneously in a Vue application?

How can I simultaneously upload images and form content? Is it possible to upload both to the client first and then to the server together with the form content? I'm looking to submit the form content along with the image to the server in one go when ...

javascriptvue.js

String passed instead of JSON in Ext JS grid sorting

I encountered an issue while attempting to incorporate server-side sorting with Sencha Ext JS. The JSON paging section appears correct, but the sort property is defined as a String rather than an Array: Actual: {"page":1,"start":0,"limit":50,"sort":"[{&b ...

javascriptjsonextjs

``How can I easily navigate to the top of the page when changing routes in React Router DOM v6?

What is the best way to scroll to the top when a route changes in react router dom v6? In the past, I used a solution from this StackOverflow post to make my page automatically scroll to the top every time a route changed with react-router-dom v5. However ...

javascriptcssreactjsreact-routerreact-router-dom

Transferring data between two "Data" elements using Jquery Datatable

Utilizing the JQuery datatable, I have made the first column of my table clickable, which is labeled as RequestNo. Here's the code snippet: "ajax": { "url": "/Request/Search/LoadData", "type": "POST", "datatype": "j ...

javascriptjquerydatatabledatatables

What is the best way to determine if a user is logged in on one tab but not on another tab within the same browser session?

GitHub has recently introduced a new functionality where if you are browsing a page as a guest in one tab and then log in from another tab, the tab where you are still a guest will show a specific message. This feature also functions in incognito or privat ...

javascriptcssscrolluser-experienceeasing

Retrieve libraries from package-lock.json file

I am tasked with extracting all the libraries and versions from the package-lock.json file. Let me provide some context. I am implementing a security module within Jenkins to create an inventory of libraries used in each application. The goal is to gather ...

javascriptnode.jssecuritynpmlibraries

The architecture of Angular controllers

Being a novice in AngularJs, I have a query regarding the controller structure. This particular file is my employeeController.js (function() { angular.module('employeeApp').controller('employeeController', employeeCont ...

javascriptangularjs

Inconsistencies observed in the functionality of window.location.reload(true)

I have been developing a feature for my website that automatically logs users out after a certain period of time. Within this functionality, I have incorporated the window.location.reload(true) method in three different sections of my code. Two of these in ...

javascriptjqueryreload

Issues with Bootstrap column rendering in IE11's Flex layout

I need assistance with the code below: .hero{ background:lightgrey; padding: 50px 0px; } <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E26 ...

htmlcssbootstrap-4internet-explorer-11

Choosing CSS/JS selector: Pick the final element with a class that does not match

My goal is to extract the most recent td element from the latest tr within an HTML table, ensuring that the latest td does not belong to the disabled class. I am attempting to achieve this using pure JavaScript with CSS selectors (without relying on jQuer ...

javascriptcssselectelement