アコーディオンチェックボックスを作る

概要

タイトルの通り、アコーディオンとチェックボックスを合体させた、下のような感じのパーツを作る。

環境

bootstrap 5.0.2

コード

html

<div>
    <div class="accordion accordion--custom" id="accordionCheckBox">
        <div class="accordion-item">
            <h2 class="accordion-header" id="accordionHeader_1">
                <input type="checkbox" class="form-check-input">
                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#accordionCollapse_1" aria-expanded="true" aria-controls="accordionCollapse_1">
                    タイトル
                </button>
            </h2>
            <div id="accordionCollapse_1" class="accordion-collapse collapse" aria-labelledby="accordionHeader_1" data-bs-parent="#accordionCheckBox">
                <div class="accordion-body">
                    内容
                </div>
            </div>
        </div>
    </div>
</div>

css

/* bootstrapのaccordionをカスタマイズする */
.accordion--custom .accordion-header {
    display: flex; /* make flex element */
    align-items: center; /* aligning child items */
    column-gap: 1rem; /* adding gap between items in row */
    padding-left: 1rem;
}

/* small udjustments */
.accordion--custom .accordion-header .accordion-button {
    padding-left: 0;
    background: none;
}

.accordion--custom .accordion-header .accordion-button:focus {
    box-shadow: none;
}

.accordion--custom .accordion-header .form-check-input {
    margin-top: 0;
}

参考にしたページ