Bootstrap accordion menus-CodePudding

I am implementing Bootstrap accordions to provide additional information. However, when I click on one of them, they all open. Is there something I can add whether it be in HTML, CSS, or JS to prevent them from all opening and closing at once? It may seem like there is alot of CSS jumbo, but its for hiding highlights and glow and a bunch of other things because I just want the base accordion structure. Thank you in advance.

UPDATE I fixed the first issue I was having, but not when I reload the page everything is collapsed like I want, but the arrows are blue and pointing up and showing that it is open. However, if I click on it twice, then it correctly shows the collapsed arrow.

Here is the code:

<div  id="dropdowns">
            <h4 id="data" >Test accordions</h2>
            <div >
                <div >
                    <button style="font-weight: bold; background-color: #f5f5f5;" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                        Test
                    </button>
                    <div id="collapseOne" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                        <div  style="background-color: #f5f5f5;">
                            Placeholder text
                        </div>
                    </div>
                </div>
                <div >
                    <button style="font-weight: bold; background-color: #f5f5f5;" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                        Test
                    </button>
                    <div id="collapseOne" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                        <div  style="background-color: #f5f5f5;">
                            Placeholder text
                        </div>
                    </div>
                </div>
                <div >
                    <button style="font-weight: bold; background-color: #f5f5f5;" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                        Test
                    </button>
                    <div id="collapseOne" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                        <div  style="background-color: #f5f5f5;">
                            Placeholder text
                        </div>
                    </div>
                </div>
                <div >
                    <button style="font-weight: bold; background-color: #f5f5f5;" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                        Test
                    </button>
                    <div id="collapseOne" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                        <div  style="background-color: #f5f5f5;">
                            Placeholder text
                        </div>
                    </div>
                </div>
                <div >
                    <button style="font-weight: bold; background-color: #f5f5f5;" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                        Test
                    </button>
                    <div id="collapseOne" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                        <div  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;
    
    }

CodePudding user response：

All your accordion-item divs have the same aria-labelledby="headingOne" so its opening any accordion that has the label headingOne, go through each and give them unique label like aria-labelledby="headingTwo" then aria-labelledby="headingThree" and you should be good to go