Is your Bootstrap accordion expanding correctly, but having trouble collapsing?

I'm encountering an issue with a bootstrap 5 accordion. The panels expand correctly, but they do not collapse back down. I'm unsure if there's a problem with my JS or CSS. No errors are showing up in Chrome's console.

When I transferred the code to Codepen, everything worked smoothly.

                  <h2>Important Dates (Fall 2022)</h2>
                  <div class="accordion">
                     <div class="accordion-group">
                        <div class="accordion-alt-1">
                           <div class="accordion-heading"><a class="accordion-toggle collapsed" data-bs-toggle="collapse" aria-expanded="false" href="#collapse_d15e639">
                                 16-Week Classes (August 22 - December 16)</a></div>
                        </div>
                        <div id="collapse_d15e639" class="accordion-body collapse">
                           <div class="accordion-inner">
                              <div class="harperTable">
                                // table content here...
      </tr>
   </tbody>
  </table>
    </div>
  </div>
 </div>
                            .

javascriptbootstrap-5

Answer №1

The current code is now operational. Please verify it once again. It looks like you missed including a parent id and the attribute data-bs-parent="#accordionExample" in your code.

<h2>Important Dates (Fall 2022)</h2>
<div class="accordion-content" id="accordionExample">
    <div class="accordion">
        <div class="accordion-group">
            <div class="accordion-alt-1">
                <div class="accordion-heading"><a class="accordion-toggle collapsed" data-bs-toggle="collapse"
                        aria-expanded="false" href="#collapse_d15e639">
                        16-Week Classes (August 22 - December 16)</a></div>
            </div>
            <div id="collapse_d15e639" class="accordion-body collapse" data-bs-parent="#accordionExample">
                <div class="accordion-inner">
                    <div class="harperTable">
                        <table>
                            <tbody>
                                <tr>
                                    <td><span>April 18-20, 2022</span></td>
                                    <td><span>Fall priority registration begins</span></td>
                                </tr>
                                ... [Your custom content here] ...
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

Answer №2

Instead of utilizing the Bootstrap accordion, I have devised a structure that effectively accomplishes the same goal. This design allows for opening the panel clicked on while simultaneously closing any others that may be currently open.

CSS

.FAQ {
    margin: 0 auto;
    max-width: 100%;
}

.FAQcard {
    margin: 10px 0;
    position: relative;
}

.FAQtitle {
    background: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    color: #000;
    font-weight: bold;
    font-size: 150%;
    cursor: default;
    display: block;
    padding: 1em 1.5em;
    position: relative;
    text-align: left;
}

.FAQtitle::after {
    content: " ";
    width: 8px;
    height: 8px;
    border-right: 1px solid #4a6e78;
    border-bottom: 1px solid #4a6e78;
    position: absolute;
    right: 20px;
    top: 20px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.FAQtitle.active::after {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.FAQpanel {
    background: #f1f2f3;
    color: #000;
    display: none;
    margin: 0;
    padding: 2em;
    text-align: left;
}

.FAQpanel p {
    margin-bottom: 5px;
    text-align: justify;
}

HTML

        <div class="FAQ">
            <div class="FAQcard">
                <div class="FAQtitle">Test Panel 1</div>
                <div class="FAQpanel fs-5">
                     Test text for panel 1
                </div>
            </div>
            <div class="FAQcard">
                <div class="FAQtitle">Test Panel 2</div>
                <div class="FAQpanel fs-5">
                     Test text for panel 2
                </div>
            </div>
        </div>

Javascript within the (document).ready() function:


            $(".FAQtitle").click(function (j) {
                var dropDown = $(this).closest(".FAQcard").find(".FAQpanel");
                $(this).closest(".FAQ").find(".FAQpanel").not(dropDown).slideUp();
                if ($(this).hasClass("active")) {
                    $(this).removeClass("active").removeClass("selected");
                } else {
                    $(this).closest(".FAQ").find(".FAQtitle.active").removeClass("active").removeClass("selected");
                    $(this).addClass("active selected");
                }
                dropDown.stop(false, true).slideToggle();
                j.preventDefault();
            });

I trust this method proves to be advantageous for your needs!

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

Mysterious symbols appearing in text/html encoding on Firefox

When I retrieve a text/html content from a ".txt" file using jquery.ajax(), everything works fine in other browsers except for Firefox. In Firefox, I see strange characters like ... This is my code: $.ajax({ url: "menuProcesso.txt", ...

javascriptjqueryajaxfirefoxfirefox-developer-tools

Incorporating Javascript into HTML

I have developed a script to randomly change the size of an element, but I am struggling to understand how to incorporate it using HTML or iframe code for randomization. <script type="text/javascript"> var banner1 = ["728", "90"]; var banne ...

javascriptjqueryajaxhtml

What is the process for extracting the time value from a jQuery timepicker?

I have been attempting to retrieve values from my time picker when a selection is made, but I am not seeing any values returned nor displayed in my HTML timepicker input field. Despite trying various methods, none have proven successful thus far. Method ...

javascriptjqueryhtmltimepicker

The mousedown event handler in Three.js disrupts the focus on the input field

Here is a line of code in threejs: document.addEventListener('mousedown', onDocumentMouseDown, false); This particular code snippet causes the input field to lose focus when clicked. This can be problematic, for instance, when there is a canva ...

javascriptjquerythree.js

Error encountered when utilizing a testing client within Node.js

When checking the response in my client, I have implemented the following code: assert.strictEqual(data,{'status':'ok','message':'tweet received'}); The code used to send the message is as follows: res.send({sta ...

javascriptnode.js

What about connecting mapStateToProps with a specific ID?

Currently, I have a basic function that fetches all Elements const mapStateToProps = ({elements}) => { return { elements: getElementsByKeyName(elements, 'visibleElements'), }; }; I want to modify it to something like this c ...

javascriptreactjsreact-redux

The process of ensuring a component updates upon clicking on it

In the process of creating a to-do app, I am working on implementing an edit mode for tasks. My goal is to have a task title that expands into task details when clicked (using Collapse from MUI). Additionally, I aim to enter into an edit mode by clicking o ...

javascriptreactjsmaterial-ui

Mapping an array of Type T in Typescript using typings

Suppose we have a type T: type T = { type: string, } and we create a function that takes an array of T and returns an object where the keys are the values of each T.type and the values are objects of type T. const toMap = (...args: T[]) => args.red ...

javascripttypescriptgenericstypescript-typingstypescript-generics

The function element.checked = true/false in Vanilla Javascript seems to be malfunctioning

Here is the HTML code I am working with: <ul class="nav md-pills pills-default flex-column" role="tablist"> <li class="nav-item"> <input type="radio" name="q01" value="1" hidden checked> <a class="nav-link choice01 ...

javascripthtmlradio-buttonchecked

Tips for transforming a JSON array into a JavaScript 2D array

I am struggling to figure out how to convert the given JSON data into a JS 2D array directly from HTML. [{"fields": {"diameter": 23.0, "neighbourhood": "WEST END"}, "model": "hug.tree", "pk": 345}, {"fields": {"diameter": 14.0, "neighbourhood": "MOUNT P ...

javascriptarraysjson

Changing the color of the timePicker clock in material-ui: a step-by-step guide

I have been attempting to update the color of the time clock in my timeInput component (material-ui-time-picker) for material-ui, but unfortunately, it is not reflecting the change. Here is the code I am using: <TimeInput style ={heure} ...

javascriptcssreactjsmaterial-ui

What are some tips for managing the hover effect using CSS3?

Here's a demonstration of my current setup. When you hover over the black box, a transition occurs and reveals my tooltip. However, I only want the tooltip to appear when hovering over the black box itself. Currently, the transition also triggers if y ...

javascriptjqueryhtmlcss

Is it possible to generate an array of strings from the keys of a type or interface?

Imagine a scenario where we have a type or interface defined as NumberLookupCriteria: type NumberLookupCriteria = { dialCode: string; phoneNumber: string; } or interface NumberLookupCriteria { dialCode: string; phoneNumber: string; } Is there a w ...

javascripttypescript

The functionality of updating input values via jQuery AJAX in HTML response is currently not functioning as expected

Hello, I need some assistance. I'm encountering difficulty with jQuery in modifying HTML values that are dynamically inserted through an AJAX response. Here is the link to the JSFiddle. Below is the HTML on the page: <button id="test">test&l ...

javascriptjqueryhtmlajax

React error: File undefined (cannot be exported)

Encountering an issue while attempting to follow a tutorial: src/components/MyApp.js Line 17:18: 'myApp' is not defined no-undef Search for the keywords to learn more about each error. This is what my myApp.js file contains: import React fr ...

javascriptreactjs

Sorting items using jQuery filter

I am working with two sortable div containers that are connected using connectWith. Both containers contain draggable items that can be moved as desired. These items have specific classes such as group1 and group2. Let's refer to the containers as con ...

javascriptjqueryhtmljquery-ui

Minimal Space Separating Footer Division and Body Element

While there are numerous discussions online about fixing footer alignment issues, I've encountered a unique problem that needs addressing. The issue at hand is a 29px gap between the bottom of the footer and the <body> tag on my webpage, which ...

javascriptjquerycssfooter

The JSON response is being overridden by a catch-all URL and ends up being displayed as a 404 error page

I'm dealing with a React/Express setup that looks something like this (simplified for clarity): const path = require('path') const express = require('express') const CLIENT_BUILD_PATH = path.join(__dirname, '../build') ...

javascriptnode.jsreactjsexpress

The point in the vector data is incorrectly positioned on the map in OpenLayers

I am looking to display a world map using the default OpenLayers WMS, along with a single point on it that will have interactive events like onhover. Below is my code snippet: var options = { projection: ...

javascriptvectoropenlayerspoint

Angular form displayed on the screen

I'm having trouble finding a solution to this issue, as the form data is not being output. var app = angular.module('myApp', []); app.controller('mainController', ['$scope', function($scope) { $scope.update = funct ...

javascriptangularjsforms