Accordion Grid Layout

Accordion.html

<style>
    .sfPageContainer .collapse {
        display: block !important
    }
</style>

<div class="sf_colsIn" data-sf-element="Accordion-Title" data-placeholder-label="Accordion Title"></div>
<div class="accordion mb-5" data-sf-element="Accordion-Wrapper">
    <div class="card shadow-sm mb-3" data-sf-element="Accordion-1">
        <div class="card-header" id="headingOne">
            <h5>
                <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                    <div class="sf_colsIn" data-sf-element="Accordion-1-Title" data-placeholder-label="Accordion 1 Title"></div>
                    <i class="fas fa-angle-down ml-auto"></i>
                </button>
            </h5>
        </div>

        <div id="collapseOne" class="collapse card-body-wrapper" aria-labelledby="headingOne" data-parent="">
            <div class="sf_colsIn card-body" data-sf-element="Accordion-1-Content" data-placeholder-label="Accordion 1 Content"></div>
        </div>
    </div>

    <div class="card shadow-sm mb-3" data-sf-element="Accordion-2">
        <div class="card-header" id="headingTwo">
            <h5>
                <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                    <div class="sf_colsIn" data-sf-element="Accordion-2-Title" data-placeholder-label="Accordion 2 Title"></div>
                    <i class="fas fa-angle-down ml-auto"></i>
                </button>
            </h5>
        </div>
        <div id="collapseTwo" class="collapse card-body-wrapper" aria-labelledby="headingTwo" data-parent="">
            <div class="sf_colsIn card-body" data-sf-element="Accordion-2-Content" data-placeholder-label="Accordion 2 Content"></div>
        </div>
    </div>

    <div class="card shadow-sm mb-3" data-sf-element="Accordion-3">
        <div class="card-header" id="headingThree">
            <h5>
                <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                    <div class="sf_colsIn" data-sf-element="Accordion-3-Title" data-placeholder-label="Accordion 3 Title"></div>
                    <i class="fas fa-angle-down ml-auto"></i>
                </button>
            </h5>
        </div>
        <div id="collapseThree" class="collapse card-body-wrapper" aria-labelledby="headingThree" data-parent="">
            <div class="sf_colsIn card-body" data-sf-element="Accordion-3-Content" data-placeholder-label="Accordion 3 Content"></div>
        </div>
    </div>

    <div class="card shadow-sm mb-3" data-sf-element="Accordion-4">
        <div class="card-header" id="headingFour">
            <h5>
                <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
                    <div class="sf_colsIn" data-sf-element="Accordion-4-Title" data-placeholder-label="Accordion 4 Title"></div>
                    <i class="fas fa-angle-down ml-auto"></i>
                </button>
            </h5>
        </div>
        <div id="collapseFour" class="collapse card-body-wrapper" aria-labelledby="headingFour" data-parent="">
            <div class="sf_colsIn card-body" data-sf-element="Accordion-4-Content" data-placeholder-label="Accordion 4 Content"></div>
        </div>
    </div>

    <div class="card shadow-sm mb-3 d-none" data-sf-element="Accordion-5">
        <div class="card-header" id="headingFive">
            <h5>
                <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
                    <div class="sf_colsIn" data-sf-element="Accordion-5-Title" data-placeholder-label="Accordion 5 Title"></div>
                    <i class="fas fa-angle-down ml-auto"></i>
                </button>
            </h5>
        </div>
        <div id="collapseFive" class="collapse card-body-wrapper" aria-labelledby="headingFive" data-parent="">
            <div class="sf_colsIn card-body" data-sf-element="Accordion-5-Content" data-placeholder-label="Accordion 5 Content"></div>
        </div>
    </div>

    <div class="card shadow-sm mb-3 d-none" data-sf-element="Accordion-6">
        <div class="card-header" id="headingSix">
            <h5>
                <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseSix" aria-expanded="false" aria-controls="collapseSix">
                    <div class="sf_colsIn" data-sf-element="Accordion-6-Title" data-placeholder-label="Accordion 6 Title"></div>
                    <i class="fas fa-angle-down ml-auto"></i>
                </button>
            </h5>
        </div>
        <div id="collapseSix" class="collapse card-body-wrapper" aria-labelledby="headingSix" data-parent="">
            <div class="sf_colsIn card-body" data-sf-element="Accordion-6-Content" data-placeholder-label="Accordion 6 Content"></div>
        </div>
    </div>

    <div class="card shadow-sm mb-3 d-none" data-sf-element="Accordion-7">
        <div class="card-header" id="headingSeven">
            <h5>
                <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseSeven" aria-expanded="false" aria-controls="collapseSeven">
                    <div class="sf_colsIn" data-sf-element="Accordion-7-Title" data-placeholder-label="Accordion 7 Title"></div>
                    <i class="fas fa-angle-down ml-auto"></i>
                </button>
            </h5>
        </div>
        <div id="collapseSeven" class="collapse card-body-wrapper" aria-labelledby="headingSeven" data-parent="">
            <div class="sf_colsIn card-body" data-sf-element="Accordion-7-Content" data-placeholder-label="Accordion 7 Content"></div>
        </div>
    </div>
</div>

Accordion.js

import $ from 'jquery'

$(".accordion").each((index, element) => {
  $(element).attr("id", 'accordion' + index);
  $('.card', element).each((index2, element2) => {
    $('.collapse', element2).attr("data-parent", '#accordion' + index)
    $('.collapse', element2).attr("id", "accordion" + index + "collapse" + index2)
    $('.card-header button', element2).attr("data-target", "#accordion" + index + "collapse" + index2)
    $('.card-header button', element2).attr("aria-controls", "accordion" + index + "collapse" + index2)
    $('.card-header button', element2).attr("aria-expanded", "false")
    //if (index2 == 0) {
    //  $(element2).addClass("active");
    //  $('.card-header button', element2).attr("aria-expanded", "true");
    //  $('.collapse', element2).addClass("show");
    //}
  })
})

$(".accordion .collapse").on("show.bs.collapse", function () {
  $('.collapse').each(function () {
    $(this).collapse('hide');
  });
  let $header = $(this).prev(), $card = $($header).parent(".card");
  $card.addClass("active");
});

$(".accordion .collapse").on("hidden.bs.collapse", function() {
  let $header = $(this).prev(), $card = $($header).parent(".card");
  $card.removeClass("active");
});