im trying to save Expanded/Collapsed states of my Bootstrap Collapses.
Im saving it in the LocalStorage and Reading it out of it.
$(".content-accordion-content").each(function (index) {
console.log(index, $(this).attr("id"));
$(this).on("show.bs.collapse", function () {
var expandedCollapses = localStorage.getItem("ExpandedCollapses");
if (expandedCollapses !== undefined && expandedCollapses !== null && expandedCollapses !== "") {
expandedCollapses = expandedCollapses + "|" + $(this).attr("id");
}
else {
expandedCollapses = $(this).attr("id");
}
localStorage.setItem("ExpandedCollapses", expandedCollapses);
})
$(this).on("hide.bs.collapse", function () {
var expandedCollapses = localStorage.getItem("ExpandedCollapses");
if (expandedCollapses !== undefined && expandedCollapses !== null) {
if (!expandedCollapses.includes("|") && expandedCollapses.includes($(this).attr("id")))
expandedCollapses = "";
else {
var ecArr = expandedCollapses.split("|");
expandedCollapses = ecArr.splice(ecArr.indexOf($(this).attr("id")), 1).join("|");
}
localStorage.setItem("ExpandedCollapses", expandedCollapses);
console.log(expandedCollapses,$(this).attr("id"));
}
})
});
It seems to work, but sometimes it removes multiple Entries from the Array.
For Example
I Open Authors then Open Books then Open Videos. the string Looks like this "Authors|Books|Videos"
If i close Books now, its only "Authors"
Can someone help me unstuck my brain?