Collapse

<div class="row">
<div class="col-lg-12 col-md-12 col-12">
    <div class="card rounded-3 mb-4">
        <!-- card header -->
        <div class="card-header bg-white p-4">
            <h3 class="mb-0 h4">Sessions</h3>
        </div>
        <!-- card body -->
        <div class="card-body p-4">
            <p class="mb-0 font-14">This is a lst of devices that have logged into your account. Revoke any sessions that you do not recognize.</p>
            <!-- collapse one -->
            <ul class="list-group list-group-flush" id="accordionLocation">
                <li class="list-group-item px-0 py-3 mt-3">
                    <div class="d-flex">
                        <div class="me-2 mt-2">
                            <div class="status bg-success"></div>
                        </div>
                        <div class="d-md-flex justify-content-between w-100">
                            <div class="d-flex">
                                <i class="fe fe-airplay font-32"></i>
                                <div class="ms-3">
                                    <h5 class="mb-0">Ahmedabad 102.250.233.120</h5>
                                    <small>Your current session</small>
                                    <p class="mb-0 font-14">Seen in IN</p>
                                </div>
                            </div>
                            <div>
                                <a
                                    href="#"
                                    data-bs-toggle="collapse"
                                    data-bs-target="#locationOne"
                                    aria-expanded="true"
                                    aria-controls="locationOne"
                                    class="mt-3 mt-md-0 btn btn-light btn-sm"
                                >
                                    See More
                                </a>
                            </div>
                        </div>
                    </div>

                    <div id="locationOne" class="collapse show" data-bs-parent="#accordionLocation">
                        <div class="card-body">
                            <div class="mb-3">
                                <h5 class="mb-0">Device:</h5>
                                <span class="font-14">Chrome on macOS</span>
                            </div>
                            <div class="mb-3">
                                <h5 class="mb-0">Last Location:</h5>
                                <span class="font-14">Ahmedabad, Gujarat, India</span>
                            </div>
                            <div>
                                <h5 class="mb-1">Signed in:</h5>
                                <p class="font-14 mb-0">July 20,2024</p>
                                <span class="font-14">Ahmedabad, Gujarat, India</span>
                            </div>
                        </div>
                    </div>
                </li>
                <!-- collapse two -->
                <li class="list-group-item px-0 py-3">
                    <div class="d-flex">
                        <div class="me-2 mt-2">
                            <div class="status bg-success"></div>
                        </div>
                        <div class="d-md-flex justify-content-between w-100">
                            <div class="d-flex">
                                <i class="fe fe-smartphone font-32"></i>
                                <div class="ms-3">
                                    <h5 class="mb-0">Surat 102.250.233.120</h5>
                                    <small>Your current session</small>
                                    <p class="mb-0 font-14">Seen in IN</p>
                                </div>
                            </div>
                            <div>
                                <a
                                    href="#"
                                    data-bs-toggle="collapse"
                                    data-bs-target="#locationTwo"
                                    aria-expanded="true"
                                    aria-controls="locationTwo"
                                    class="mt-3 mt-md-0 btn btn-light btn-sm"
                                >
                                    See More
                                </a>
                            </div>
                        </div>
                    </div>

                    <div id="locationTwo" class="collapse" data-bs-parent="#accordionLocation">
                        <div class="card-body">
                            <div class="mb-3">
                                <h5 class="mb-0">Device:</h5>
                                <span class="font-14">Chrome on macOS</span>
                            </div>
                            <div class="mb-3">
                                <h5 class="mb-0">Last Location:</h5>
                                <span class="font-14">Surat, Gujarat, India</span>
                            </div>
                            <div>
                                <h5 class="mb-1">Signed in:</h5>
                                <p class="font-14 mb-0">July 20,2024</p>
                                <span class="font-14">Surat, Gujarat, India</span>
                            </div>
                        </div>
                    </div>
                </li>
                <!-- collapse three -->
                <li class="list-group-item px-0 pt-3 pb-0">
                    <div class="d-flex">
                        <div class="me-2 mt-2">
                            <div class="status bg-success"></div>
                        </div>
                        <div class="d-md-flex justify-content-between w-100">
                            <div class="d-flex">
                                <i class="fe fe-tablet font-32"></i>
                                <div class="ms-3">
                                    <h5 class="mb-0">Vadodara 102.250.233.120</h5>
                                    <small>Your current session</small>
                                    <p class="mb-0 font-14">Seen in IN</p>
                                </div>
                            </div>
                            <div>
                                <a
                                    href="#"
                                    data-bs-toggle="collapse"
                                    data-bs-target="#locationThree"
                                    aria-expanded="true"
                                    aria-controls="locationThree"
                                    class="mt-3 mt-md-0 btn btn-light btn-sm"
                                >
                                    See More
                                </a>
                            </div>
                        </div>
                    </div>

                    <div id="locationThree" class="collapse" data-bs-parent="#accordionLocation">
                        <div class="card-body">
                            <div class="mb-3">
                                <h5 class="mb-0">Device:</h5>
                                <span class="font-14">Chrome on macOS</span>
                            </div>
                            <div class="mb-3">
                                <h5 class="mb-0">Last Location:</h5>
                                <span class="font-14">Vadodara, Gujarat, India</span>
                            </div>
                            <div>
                                <h5 class="mb-1">Signed in:</h5>
                                <p class="font-14 mb-0">July 20,2024</p>
                                <span class="font-14">Vadodara, Gujarat, India</span>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>
</div>