Just diving into the world of bootstrap and javascript. How do I save the collapsed state to make sure it stays even after refreshing the page?
<p>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Collapse Button
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Just started an exciting engineering project at Makers Academy. Delving into more complex areas, with a quick guide on adding likes to posts.
</div>
</div>
Here's my attempt using Javascript.
$(document).ready(function () {
$(".collapse").on("shown.bs.collapse", function () {
localStorage.setItem("coll_" + this.id, true);
});
$(".collapse").on("hidden.bs.collapse", function () {
localStorage.removeItem("coll_" + this.id);
});
$(".collapse").each(function () {
if (localStorage.getItem("coll_" + this.id) === "true") {
$(this).collapse("show");
}
else {
$(this).collapse("hide");
}
});
});