My code successfully toggles the visibility of forums on my webpage.
Although the status show/hide is retained after reloading the page,
I have an issue with the font awesome icon reverting back to default.
How can I modify the code to ensure that the font awesome icon remains unchanged during reload?
$(document).ready(function() {
if (window.localStorage.getItem("#wpf-cat-6 .forum-wrap") != null) {
var pb = window.localStorage.getItem("#wpf-cat-6 .forum-wrap");
if (pb == "true") {
$("#wpf-cat-6 .forum-wrap").hide();
}
}
$("#wpf-cat-6 .wpforo-toggle").click(function() {
var v = $("#wpf-cat-6 .forum-wrap").is(":visible")
$("#wpf-cat-6 .forum-wrap").slideToggle("slow");
$("#wpf-cat-6 .wpforo-toggle i").toggleClass('fa-chevron-up fa-chevron-down');
window.localStorage.setItem("#wpf-cat-6 .forum-wrap", v)
});
});
Your assistance is greatly appreciated.
Live Demonstration available at: Fiddle