<div class="accordion" id="accordionExample">

    <div class="accordion-item">

      <h2 class="accordion-header" id="headingOne">

        <button

            data-mdb-collapse-init

            class="accordion-button"

            type="button"

            data-mdb-target="#collapseOne"

            aria-expanded="true"

            aria-controls="collapseOne"

            >

            Accordion Item #1

        </button>

      </h2>

      <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-mdb-parent="#accordionExample">

        <div class="accordion-body">

            <strong>This is the first item's accordion body.</strong> It is hidden by default,

            until the collapse plugin adds the appropriate classes that we use to style each

            element. These classes control the overall appearance, as well as the showing and

            hiding via CSS transitions. You can modify any of this with custom CSS or

            overriding our default variables. It's also worth noting that just about any HTML

            can go within the <strong>.accordion-body</strong>, though the transition does

            limit overflow.

        </div>

      </div>

    </div>

    <div class="accordion-item">

      <h2 class="accordion-header" id="headingTwo">

        <button

            data-mdb-collapse-init

            class="accordion-button collapsed"

            type="button"

            data-mdb-target="#collapseTwo"

            aria-expanded="false"

            aria-controls="collapseTwo"

            >

            Accordion Item #2

        </button>

      </h2>

      <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-mdb-parent="#accordionExample">

        <div class="accordion-body">

          <div class="form-outline mt-4" data-mdb-input-init>

            <input

              class="form-control bg-white"

              id="formControlReadonly"

              type="text"

              value="Readonly input here..."

              aria-label="readonly input example"

              readonly

              />

            <label class="form-label" for="formControlReadonly">Readonly</label>

          </div>

        </div>

      </div>

    </div>

  </div>

​