Setting the Accordion

Here is the code for the accordion in homepage 1 

<!--ACCORDIAN START-->
<div class="accordion rdn_accordian" id="about_accordian">
    <div class="accordion-item">
        <h2 class="accordion-header" id="headingOne">
            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne"
                aria-expanded="true" aria-controls="collapseOne">
                Sciatica & Cycling - All You Need To Know.
            </button>
        </h2>
        <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne"
            data-bs-parent="#about_accordian">
            <div class="accordion-body">
                <p>The main event, what we are all here for. Cheer on the riders as they begin their course.</p>
                <p> Welcome the riders to the finish line at the Event Village at the Clare Town Oval. Here you will find food
                    trucks, a pop-up bar, live music and a relaxing atmosphere to reflect on.</p>
            </div>
        </div>
    </div>
    <div class="accordion-item">
        <h2 class="accordion-header" id="headingTwo">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo"
                aria-expanded="false" aria-controls="collapseTwo">
                Physical activity and cycling is relatively low impact.
            </button>
        </h2>
        <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#about_accordian">
            <div class="accordion-body">
                <p>The main event, what we are all here for. Cheer on the riders as they begin their course.</p>
                <p> Welcome the riders to the finish line at the Event Village at the Clare Town Oval. Here you will find food
                    trucks, a pop-up bar, live music and a relaxing atmosphere to reflect on.</p>
            </div>
        </div>
    </div>
    <div class="accordion-item">
        <h2 class="accordion-header" id="headingThree">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree"
                aria-expanded="false" aria-controls="collapseThree">
                Schedule recovery after heavy training loads.
            </button>
        </h2>
        <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree"
            data-bs-parent="#about_accordian">
            <div class="accordion-body">
                <p>The main event, what we are all here for. Cheer on the riders as they begin their course.</p>
                <p> Welcome the riders to the finish line at the Event Village at the Clare Town Oval. Here you will find food
                    trucks, a pop-up bar, live music and a relaxing atmosphere to reflect on.</p>
            </div>
        </div>
    </div>
</div>
<!--ACCORDIAN END-->

If you want to create another or new accordion make sure to use different id for accordion rdn_accordian class.

Make sure to use the same data-bs-target value with the id of accordion-collapse

Example:

<div class="accordion rdn_accordian" id="about_accordian">
    <div class="accordion-item">
        <h2 class="accordion-header" id="someHeader">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#thisMustSame"
                aria-expanded="false" aria-controls="thisMustSame">
                Some title
            </button>
        </h2>
        <div id="thisMustSame" class="accordion-collapse collapse" aria-labelledby="someHeader"
            data-bs-parent="#about_accordian">
            <div class="accordion-body">
                <p>
                    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsum dolor nobis iste harum nemo obcaecati totam corrupti illum at voluptates. Similique necessitatibus autem, eos rem aspernatur minima. Dolorum, officiis ullam.
                </p>
            </div>
        </div>
    </div>

    ....

</div>

You can see this link for more info about accordion and other element.

Back to top