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>