Dynamic collapsible navigation panels powered by Bootstrap

I am currently working on creating Bootstrap accordions to display supplementary information. However, I have encountered an issue where clicking on one accordion opens all of them simultaneously. Is there a way in HTML, CSS, or JS to prevent this from happening? The extensive CSS code is mainly for aesthetic purposes like hiding highlights and glow effects, with the primary focus being on maintaining the basic accordion structure. Thank you for your help!

UPDATE: I was able to resolve the initial problem, but now when I refresh the page, all accordions are collapsed as desired. However, the arrows appear blue and pointing upwards, indicating they are open. It's only after toggling them twice that they correctly display the collapsed arrow.

Below is the code snippet:

<div class="col-12 offset-4 my-5" id="dropdowns">
            <h4 id="data" class="ph">Test accordions</h2>
            <div class="accordion">
                <div class="accordion-item">
                    <button style="font-weight: bold; background-color: #f5f5f5;"class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                        Test
                    </button>
                    <div id="collapseOne"class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                        <div class="accordion-body" style="background-color: #f5f5f5;">
                            Placeholder text
                        </div>
                    </div>
                </div>
                <div class="accordion-item">
                    <button style="font-weight: bold; background-color: #f5f5f5;"class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                        Test
                    </button>
                    <div id="collapseOne"class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                        <div class="accordion-body" style="background-color: #f5f5f5;">
                            Placeholder text
                        </div>
                    </div>
                </div>
                <div class="accordion-item">
                    <button style="font-weight: bold; background-color: #f5f5f5;"class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                        Test
                    </button>
                    <div id="collapseOne"class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                        <div class="accordion-body" style="background-color: #f5f5f5;">
                            Placeholder text
                        </div>
                    </div>
                </div>
                <div class="accordion-item">
                    <button style="font-weight: bold; background-color: #f5f5f5;"class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                        Test
                    </button>
                    <div id="collapseOne"class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                        <div class="accordion-body" style="background-color: #f5f5f5;">
                            Placeholder text
                        </div>
                    </div>
                </div>
                <div class="accordion-item">
                    <button style="font-weight: bold; background-color: #f5f5f5;"class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                        Test
                    </button>
                    <div id="collapseOne"class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                        <div class="accordion-body" style="background-color: #f5f5f5;">
                            Placeholder text
                        </div>
                    </div>
                </div>
            </div>
        </div>


.ph {

        font-weight: bold;
    }
    
    .accordion-button:focus {
        font-weight: bold;
        box-shadow: none;
        border-color: black;
    }
    
    .accordion-button:not(.collapsed) {
        color: black;
        background-color: #f5f5f5;
      }
      
    .accordion-button:link, .accordion-button:visited, .accordion-button:hover, .accordion-button:active {
        background-color: #f5f5f5;
        color: black;
        text-decoration: none;
        border: hidden;
        border-color: #f5f5f5;
        box-shadow: 0px;
    }
      
    /* .accordion-button:focus {
        z-index: 3;
        border-color: #f5f5f5;
        outline: 0;
        box-shadow: 0 0 0 .25rem #f5f5f5;
        background-color: #f5f5f5;
    } */
    
    .accordion-item {
        border-top: hidden;
        border-left: hidden;
        border-right: hidden;
        border-bottom-color: #d4d4d4;
        border-bottom-style: solid;
        border-bottom-width: 2px;
        /* width: 100%; */
        /* padding-left: 0px;
        padding-right: 0px; */
    
    }
    
    .accordion-button {
        /* position: absolute;
        left: 0px; */
        padding-left: 0px;
    
    }
javascripthtmlcssbootstrap-4accordion

Answer №1

All of your accordion-item elements currently share the same 

aria-labelledby="headingOne"
, causing all accordions with that label to open simultaneously. To fix this, assign a unique label to each accordion item such as 
aria-labelledby="headingTwo"
and 
aria-labelledby="headingThree"
. Once you have done that, everything should work smoothly.

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 retrieve data from a JSON object using JavaScript

Forgive my ignorance, but I'm attempting to showcase the value of content by executing console.log(teams);. Upon inspecting Firebug on Mozilla, this is what I discovered: [Object { id= "50", content= "Team 1 test" , date="Tue Mar 26 2013 12:00:00" ...

javascriptarraysjson

Calculate the total sum of all the span elements using jQuery

I am currently working with a more simplified calculator script that looks like this: $('input').keyup(function () { // run whenever the value changes var firstValue = parseFloat($('#first').val()) || 0; // retrieve field value var sec ...

jqueryhtml

Tips for properly encoding HTML code before inserting it into a MySQL database

I have been using the tinymce editor to create an html page that I then insert into mysql. Here's what I've tried: $esdata = mysql_real_escape_string($data); This method works for all types of html formatting, except for images. For example, if ...

phpmysqlhtml

Creating a great user experience with Knockout JS and Bootstrap Modal

I created a straightforward webpage with a button that triggers the opening of a modal. You can view all my code in this JSFiddle: JS Fiddle Also provided below: $('#displayDetails').click(() => { let obj = { Overview: ' ...

javascripthtmljqueryknockout.jsbootstrap-modal

I am looking to update a WordPress site every 10 seconds to keep it current

Currently, I am working on a plugin and my goal is to automatically refresh the widget every 10 seconds. Can someone guide me on how to achieve this? I need to figure out a way to call the widget function at regular intervals in order to refresh the conte ...

javascriptphpjqueryhtmlwordpress

Struggling with setting container height to 100% in Angular/Material and encountering difficulties

Having some trouble creating a new UI mockup using Angular and Material design elements. I can't seem to get the area below my toolbar to fill the remaining vertical height of the page. Check out my code example here Despite setting html, body { hei ...

htmlcssangularflexboxangular-material2

Error: Cannot access property 'tb' of an undefined value

While running the Application, I encountered an error in the declaration of constants.ts file where I was assigning data from a json file to constant variables. In the json file named object.json, I had some data structured like this: { "furniture": { ...

javascriptangulartypescriptangular-cliangular-cli-v6

Issue with resetting column widths in Datatables

I am trying to set the maximum width for a datatable with a fixed header using JavaScript. Below is the JavaScript code snippet I am using: var oTable = $('#example').DataTable( { "sScrollY": 200, ...

jqueryhtmlcssdatatables

Leveraging webpack alongside url-loader for embedding images within React applications

When styling with an inline style and passing in the URL of an image file, I typically do it as shown below: let url = `url(${this.state.logo})` var cardStyle = { backgroundImage: url, backgroundSize: '200px 50px' ...

cssreactjswebpackwebpack-file-loader

Starting point for Angular 2 app setup

What is the best way to handle data initialization in my app? For instance, if a user logs in and presses F5, I need to retrieve the current user data from the server before any other queries are executed, such as getting the user's orders. In Angular ...

javascriptangularjsangular

Utilize PHP and a dynamic web framework like Spry to showcase data from two MySQL tables in an

My goal is to effectively showcase data from two separate tables in mysql using PHP and spry. Initially, I considered implementing spry tabbed panels, but I am uncertain of its feasibility. Essentially, I envision the tab names being populated from one tab ...

phphtmlmysqlhtml-tablespry

Retrieve the two latest items in a dictionary array based on their order date

I've been browsing through similar discussions, but I just can't seem to grasp the concept. The JSON data for my current item appears to be more complicated than I anticipated. Here is a snippet of the lengthy JSON data: items = [ { ...

javascripttypescript

"Despite modifying the ID in the response data of Angular MongoDB, the request data ID remains unchanged

Having trouble with managing requests and responses, specifically when a customer tries to add multiple items of the same product but in different sizes. The initial step involves checking if the ID exists by using a count and an if statement. If it exists ...

javascriptnode.jsangulartypescriptmongodb

Can you please explain the meaning of this wildcard symbol?

We recently came across a part of our grunt file that was written by a former colleague. While the code functions correctly, the specific purpose of one segment remains a mystery to us! Here is the enigmatic code snippet: dist: { files: [{ ex ...

cssjsongruntjswildcard

Is there a way to distinguish mouseout/leave events based on the side in jQuery?

How can I detect if the mouse event has moved away from a particular side of an element? For example, I have a DIV with a mouseover/mouseenter event and I only want to activate the action when the mouse leaves from the left or right side of the DIV. If it ...

javascriptjquery

Setting the percentage height of parent and child divs in a precise manner

Trying to work through this without causing chaos. I have a container div containing three floated left child divs, with the container div set to 100% height like so: .Container { height: 100%; min-width: 600px; overflow-y: hidden; } One of the child divs ...

javascriptjquerycsshtml

Adding the output of a UNIX command to a div container

I am currently working on creating a UNIX web-based terminal for educational purposes. My progress so far includes setting up a text box and displaying the output, similar to this: <?php $output = shell_exec('ls'); echo "<pre>$output< ...

phpajaxshellunixhtml

Implementing an onchange function with Dojo JavaScript for selection

I am using dojo.js to create a customized dropdown box with scroll functionality, which is not available in the standard select statement. Although I have successfully implemented the dropdown menu, I am struggling to trigger a function using the standard ...

javascriptjqueryhtmld3.jsdojo

Updating an array using `setState` does not result in the array being updated

I created a component that uses the .map() method to render an array of students and has a button to shuffle and update the display. However, I'm facing an issue where the display does not update every time I click the button. const Home: NextPage = ...

javascriptreactjstypescript

Steps for implementing a single proxy in JavaScript AJAX with SOAP, mirroring the functionality of the WCF Test Client

I am working with a WCF web Service and a javascript client that connects to this service via AJAX using SOAP 1.2. My goal is to pass a parameter to instruct the AJAX SOAP call to use only one proxy, similar to how it is done in the WCF Test Client by unch ...

javascriptajaxwcfsoapproxy