What seems to be the issue with Collapse.js in Bootstrap 3.3.4 on this page?

I am currently utilizing Bootstrap version 3.3.4. All of my resources are linked relatively and the HTML file is in the correct location for access.

I am creating a 'Learn More' button that should display a collapsed unordered list either above or below it when clicked.

However, I am struggling to get any button or link to toggle a collapsed element.

Below is an example of what I am trying to achieve:

<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
        <script src="js/jquery-1.11.3.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </head>
    <body>
        <button class="btn btn-default" type="button" data-toggle="collapse" data-target="#moreInfo" aria-expanded="false" aria-controls="collapseExample">Learn More</button>
        <div class="collapse" id="moreInfo">
            <div class="well">
                <ul>
                    <li>list item 1</li>
                    <li>list item 2</li>
                    <li>list item 3</li>
                    <li>list item 4</li>
                    <li>list item 5</li>
                </ul>
            </div>
        </div>
        </body>
    </html>

Answer №1

It seems like you may have overlooked linking the jQuery library. :)

Your HTML code is functioning properly when tested at: http://www.bootply.com/new#

If it still doesn't work, you can manually trigger the collapse on initial load.

$('#moreInfo').collapse();

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

Guide to setting up a backend system using AJAX, PHP, and MySQL to handle dynamic video sources in conjunction with Google TV Templates

If you're looking to develop web apps for Google TV, particularly those involving video content, the simplest method is to utilize Google TV Templates: https://developers.google.com/tv/web/docs/gtv-templates. The original Google TV Templates included ...

Developing a custom mixin to alert a banner at the top of the webpage

I currently have a feature on my website that triggers a pop-up notification whenever a message is received from another user. The pop-up consists of a div displaying the content of the message along with a close button. After exploring various methods to ...

Round up all the hyperlinks within a paragraph and organize them neatly into a list

Let me present a scenario: <p class="links">Lorem <a href="#">diam</a> nonummy nibh <a href="#">Lorem</a></p> Following that, I have a lineup: <ul class="list"> </ul> How do I achieve this using jQuery? ...

Creating a Vue.js vuetify input that restricts the user to entering only three digits before the decimal point and two digits after the decimal point

I am looking to implement a restriction on the total number of input digits to 3. Users should be able to enter numbers like 333, 123, etc. However, if they include a decimal point, they should only be allowed to enter 2 digits after the decimal point. Val ...

Utilizing AngularJS to effectively group and filter using Ng-repeat

I am working with an array retrieved from an Azure server Log (clicks array) that I need to sort in a specific way. Below is the request: $http({ method: 'Get', headers: { 'Host': 'api.applicationinsights.io&apo ...

Dynamically insert JavaScript and CSS files into the header by using the append method

Due to a specific reason, I am loading CSS and scripts into my head tag using the "append" method. For example: $("head").append('<script type="application/javascript" src="core/js/main.js"></script>'); I'm asynchronously pulli ...

Assigning a CSS class during the $routeChangeStart event does not activate the animation, unless it is placed within a setTimeout function

Just dipping my toes into Angular, so feel free to correct me if I'm way off base here. I've been working on animating the clamps on both sides of my website to slide in upon the initial page load. You can check out the live version at: Current ...

Refresh the webpage source code for an AJAX request

When using AJAX calls on a page, I have noticed that the page source remains unchanged. This can be problematic if a user performs forward/backward operations in their browser, as the browser will display the original HTML code instead of the updated conte ...

`Achieving object placement on top of another object in ThreeJS`

Being new to ThreeJS, I am seeking help with a basic question. I have loaded multiple GLTF files into my scene and I need to position one object on top of another (but the position should be adjustable later on) For instance: https://i.sstatic.net/oJq1BIi ...

In VueJS 3, the data within the app.component instance will lack reactivity if it is declared within the data() or setup() functions

When it comes to declaring new reactive variables inside a component, I faced an interesting issue. It seems that setting the component globally, outside the app.component instance, and then returning it to either the data() or setup() function works perfe ...

Generating random numbers within specified character limits using Javascript and Selenium

Just starting to learn javascript - I am working on creating random user IDs for my selenium test scenarios. The line of code I am using for the value is as follows: javascript{Math.floor(Math.random()*11111)} However, there is a specific field that need ...

The component in React does not refresh after updating the state

I have a React page where I am displaying a list of quizzes fetched from an external API. There's also a "New Quiz" button that opens a dialog with a form for users to create a new quiz. My issue is with making the table re-render once the POST reque ...

Transferring checkbox data to Bootstrap modals and dynamically summoning specific div modals using their unique identifiers

I have been trying to populate the checkbox values into corresponding modal divs based on button clicks, but I am facing difficulties in achieving it. Desired outcome: The buttons should trigger the display of selected checkbox values in their respective ...

Incorporating the unshift method in JavaScript: A Step-by-

I'm looking to create a new function with the following requirements: Function add(arr,...newVal){ } array = [1,2,3]; add(array,0) console.log(array); //I want this to output [0,1,2,3] I tried creating the function similar to push like this: ...

Turn off integrity verification for local dependencies in package-lock.json

Is there a way to bypass the integrity check for a local dependency in package-lock.json? Within my project repository, I have a core library along with two Angular applications that both rely on this core library as a dependency. The problem arises beca ...

Tips for using regular expressions with the find method in JavaScript?

Welcome to my Object: let data = [{ "title": "User info", "category": "personal", "userId": "abc12345" }, { "title": "Customer Info", "category": ...

Make sure to align images and comments seamlessly on your website just like in the comment section of YouTube

Looking for help aligning an image and two spans in one row <img src="../images/profile/profile.png" class="img" /> <span class="name">First Name</span> <span class="comment"> This is simply dumm ...

Tips for sending values via props to a different component and the common error message: "Consider using the defaultValue or value props instead of setting selected on the <option> element"

Currently, I am attempting to pass the selected value using the prop: handle state change, but encountering two errors. Error 1 : Instead of setting selected on <option>, use the defaultValue or value props. Error 2 : A property 'active' ...

How can I use jQuery to set the text in a select element in HTML?

I have come across more examples of this, but unfortunately they do not seem to work. $(window).load(function () { $("#country").html('Please make a selection from the options below'); }); <select id="country"> <option value="None"> ...

Issue encountered while generating REST API through Postman resulting in a 500 error

I am in the process of creating a Node.js API for a web application. The GET request is functioning properly, however, when attempting to execute a POST request, I encounter an error messageError Below is the code snippet: //User Schema const mongoose ...