"The Bootstrap collapse feature allows you to hide and

I've been struggling for hours to make the bootstrap collapse plugin work. I apologize if this question has already been asked multiple times, but I have searched tirelessly for a suitable solution. Below is my HTML code:

<html lang="en">
 <head>
   <meta charset="utf-8">
   <title>:(</title>
   <!-- Bootstrap -->
   <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
 </head>

 <body>
   <h1>Collapse!</h1>

  <a class="btn btn-danger" data-toggle="collapse" data-target="#demo">
     simple collapsible
  </a>

  <div id="demo" class="collapse in">
        <p>Hopefully this content will be collapsible!</p>
        <p>And this too!</p>
  </div>


<script type="text/javascript">
$(document).ready(function(){
        $(".collapse").collapse()
});
</script>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>

  </body>
</html>

This is my first time using stackoverflow to ask a question, so please forgive any formatting issues. I added that snippet of jquery hoping it would initialize the JS elements on the page. Any assistance would be greatly appreciated!

Answer №2

Although this question may be dated, I wanted to add a quick note.

It appears that there is no requirement to utilize both the Bootstrap data attributes and the JavaScript. The Bootstrap documentation (refer to Usage) may not make it clear that these are separate options, but either one works perfectly on its own (either data attributes OR JS).

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

Step-by-step guide on resolving AngularJS Issue: [$injector:modulerr]

I'm encountering an issue with Angular JS where I'm receiving the following error: jquery.js:7993 Uncaught Error: [$injector:modulerr] Failed to instantiate module application due to: Error: [$injector:nomod] Module 'application' is no ...

Put down a sentence into a JavaScript file

Currently, I am utilizing an array to showcase a series of images on a website: let paintingImages; paintingImages = [ { url: 'images/objects/ron.jpg', alt: 'ron' } ]; This particular Ja ...

Implementing click functionality in React.js

Currently, I am in the process of learning React.Js and facing an issue with attaching an event to output something in the console. Despite my efforts, I am unable to get my function to trigger. Is there a method to attach an onClick event to a react div? ...

Updating the Backbone.js model within a MySQL database

I am facing an issue with my model setup: var Car = Backbone.Model.extend({ url: "/save.php", defaults: { color: "red" } }); Upon document ready, I initialize a new instance of the model and save it: new volvo = new Car({color:"gree ...

There was an error in reading the property 'RNFSFileTypeRegular' of null, with the JavaScript engine reporting as hermes

Below are the dependencies listed in my package.json file: "dependencies": { "@expo/vector-icons": "^14.0.2", "@react-navigation/native": "^6.0.2", "expo": "~51.0.23", & ...

Steps to create a typewriter effect using a collection of words

I managed to create a looping typewriter effect, but I'm facing an issue where the first word in the array is not being typed again after the first cycle. Additionally, I am seeing 'undefined' displayed after the last word before it repeats ...

Issue with Angular2 Directive loading without any functionality

Update: The root cause of the issue has been identified. Surprisingly, it was a Chrome caching problem. It seems that Chrome had cached something, and only by disabling caching while the debugger was active and manually refreshing the page did I finally ma ...

CSS - Struggling to center an element with absolute positioning in IE

I have created a layout with 3 div elements. The first parent div has a css property of position relative and is taking up the full width of the viewport. The second child div has an absolute position to cover the entire area of the parent. The third child ...

Azure Functions - Incorporating Specialized Node Module

I've been delving into Azure Functions and I'm facing a challenge with incorporating a third-party Node module in my function. Despite numerous attempts, I haven't been successful in importing it. { "id": "aaaaaaaa-bbbb-cccc-dddd-eeeeeeee ...

Difficulty in decoding intricate JSON response using JQuery (or simply JavaScript)

Consider the function below, which retrieves JSON data from a Solr instance: var url = "http://myserver:8080/solr/select?indent=on&version=2.2&q=(title:*Hollis* OR sub_title:*Hollis*+OR+creator:*Hollis*+OR+publisher:*Hollis*+OR+format:*Hollis*++OR ...

The retrieved JPEG data from FileReader does not align with the actual data stored in the file

My goal is to choose a local JPEG file in the web browser using HTML5 FileReader so that I can submit it to a server without having to reload the page. Although all the technical aspects are functioning properly and I believe I am successfully transferring ...

Using jQuery and Ajax to fade in content after all images and other assets have finished loading

I've encountered an issue with loading pages via ajax for users with custom URLs. For example, a profile is usually found at http://example.com/users/Dan, but if a user has a custom URL like http://example.com/DansCustomURL, I need to fetch their desi ...

essential elements for mapping an array using typescript

Struggling to iterate through an array of objects, each with a unique id created by uuidv4(), resulting in a string type. TypeScript is giving errors (( Type 'String' is not assignable to type 'Key | null | undefined')) due to the &apos ...

Manipulate md-select options with Angular using setValue

My goal is to update a select option, but I'm having trouble getting it to work properly. When I use this.eventForm.controls.venue.setValue(event.venue.name);, the value of venue changes to match event.venue.name. However, the select option itself doe ...

What could be causing the issue of TinyMCE 5 not displaying formatted HTML on both the website page and in the database?

Seeking assistance as a beginner programmer. I'm currently working on my first coding project and encountered an issue. In need of a text editor, I incorporated TinyMCE 5. Utilizing JavaScript and mongoDB for coding purposes. This is how I included ...

What is the best way to insert a chart into a div using *ngIf in Angular?

I just started using chart.js and successfully created the desired chart. However, when attempting to implement two tab buttons - one for displaying tables and the other for showing the chart - using *ngIf command, I encountered an error: Chart.js:9369 F ...

Prevent jQuery UI dialog from adjusting its position relative to the browser when scrolling

When I launch a jQuery UI dialog, the position of the dialog changes when I scroll the browser. How can I make it remain in the same position relative to the browser window? ...

Achieving a consistent fixed width for tbody even when scrollbar is present

thead{ width: calc(100% - 17px); display:block; } tbody{ display:block; overflow-y: auto; height:100px; } http://jsfiddle.net/mkgBx/ Is there a way to adjust the width of the tbody element to match that of the thead element plus the scrollbar? Currently ...

Why is Facebook giving me undefined instead of my profile in Node.js?

I am working on implementing authentication using Google and Facebook in my application. The front-end is built with AngularJS and the server is powered by node.js. Below is the Facebook authentication function in my node.js server: var User = require(&a ...

Is it still necessary to include -webkit- and -moz- prefixes for widely recognized CSS3 properties?

I'm currently in the process of tidying up a CSS file, and I'm contemplating whether it's now acceptable to remove vendor-specific properties if they have been standardized (or at least partially standardized). For instance, should I contin ...