Localstorage setItem when click on and keep the content reveal even after reload page

Question

I'm trying to localStorage setItem for this script to continue to show the content inside the DIV tag and keep it open even after refreshing the page. Now I got stuck and don't know what to do to make it work.

In this code after clicking on the Click Toggle Div link, the content will reveal and I want it to continue to reveal even I reload the page or until I click on the Click Toggle Div link again.

var getTiming = function (elem) {
    var timing = 350;
    if (elem.classList.contains('show-fast')) {
        timing = 100;
    }
    if (elem.classList.contains('show-slow')) {
        timing = 2000;
    }
    return timing;
};

// Show an element
var show = function (elem) {

    // Get the transition timing
    var timing = getTiming(elem);

    // Get the natural height of the element
    var getHeight = function () {
        elem.style.display = 'block'; // Make it visible
        var height = elem.scrollHeight + 'px'; // Get it's height
        elem.style.display = ''; //  Hide it again
        return height;
    };

    var height = getHeight(); // Get the natural height
    elem.classList.add('is-visible'); // Make the element visible
    elem.style.height = height; // Update the max-height

    // Once the transition is complete, remove the inline max-height so the content can scale responsively
    window.setTimeout(function () {
        elem.style.height = '';
    }, timing);

};

// Hide an element
var hide = function (elem) {

    // Get the transition timing
    var timing = getTiming(elem);

    // Give the element a height to change from
    elem.style.height = elem.scrollHeight + 'px';

    // Set the height back to 0
    window.setTimeout(function () {
        elem.style.height = '0';
    }, 1);

    // When the transition is complete, hide it
    window.setTimeout(function () {
        elem.classList.remove('is-visible');
    }, timing);
  
  

};

// Toggle element visibility
var toggle = function (elem, timing) {

    // If the element is visible, hide it
    if (elem.classList.contains('is-visible')) {
        hide(elem);
        return;
    }

    // Otherwise, show it
    show(elem);

};

// Listen for click events
document.addEventListener('click', function (event) {

    // Make sure clicked element is our toggle
    if (!event.target.classList.contains('toggle')) return;

    // Prevent default link behavior
    event.preventDefault();

    // Get the content
    var content = document.querySelector(event.target.hash);
    if (!content) return;

    // Toggle the content
    toggle(content);

}, false);

.toggle-content {
    display: none;
    height: 0;
    opacity: 0;
    overflow: hidden;
    transition: height 350ms ease-in-out, opacity 750ms ease-in-out;
}



.toggle-content.is-visible {
    display: block;
    height: auto;
    opacity: 1;
}

<p>
  <a class="toggle" href="#example">Click Toggle Div</a>
</p>

<div class="toggle-content" id="example">
    This content reveals and setItem localStorage to keep this content revealed even after page reload or until I click on  <a class="toggle" href="#example">Click Toggle Div</a> again.
</div>

Answer 1

Not sure I understand you well, but if you want to add/remove item from localStorage for toggle, add this:

var getTiming = function (elem) {
    var timing = 350;
    if (elem.classList.contains('show-fast')) {
        timing = 100;
    }
    if (elem.classList.contains('show-slow')) {
        timing = 2000;
    }
    return timing;
};

// Show an element
var show = function (elem) {
    
    //add token to localStorage
    localStorage.setItem("toggle", true);
    
    // Get the transition timing
    var timing = getTiming(elem);

    // Get the natural height of the element
    var getHeight = function () {
        elem.style.display = 'block'; // Make it visible
        var height = elem.scrollHeight + 'px'; // Get it's height
        elem.style.display = ''; //  Hide it again
        return height;
    };

    var height = getHeight(); // Get the natural height
    elem.classList.add('is-visible'); // Make the element visible
    elem.style.height = height; // Update the max-height

    // Once the transition is complete, remove the inline max-height so the content can scale responsively
    window.setTimeout(function () {
        elem.style.height = '';
    }, timing);

};

// Hide an element
var hide = function (elem) {

    //remove from localStorage
    localStorage.removeItem("toggle")
    
    // Get the transition timing
    var timing = getTiming(elem);

    // Give the element a height to change from
    elem.style.height = elem.scrollHeight + 'px';

    // Set the height back to 0
    window.setTimeout(function () {
        elem.style.height = '0';
    }, 1);

    // When the transition is complete, hide it
    window.setTimeout(function () {
        elem.classList.remove('is-visible');
    }, timing);
  
  

};

// Toggle element visibility
var toggle = function (elem, timing) {

    // If the element is visible, hide it
    if (localStorage.getItem("toggle")) {
        hide(elem);
        return;
    }

    // Otherwise, show it
    show(elem);

};

// Listen for click events
document.addEventListener('click', function (event) {

    // Make sure clicked element is our toggle
    if (!event.target.classList.contains('toggle')) return;

    // Prevent default link behavior
    event.preventDefault();

    // Get the content
    var content = document.querySelector(event.target.hash);
    if (!content) return;

    // Toggle the content
    toggle(content);
  
    

}, false);

.toggle-content {
    display: none;
    height: 0;
    opacity: 0;
    overflow: hidden;
    transition: height 350ms ease-in-out, opacity 750ms ease-in-out;
}



.toggle-content.is-visible {
    display: block;
    height: auto;
    opacity: 1;
}

<p>
  <a class="toggle" href="#example">Click Toggle Div</a>
</p>

<div class="toggle-content" id="example">
    This content reveals and setItem localStorage to keep this content revealed even after page reload or until I click on  <a class="toggle" href="#example">Click Toggle Div</a> again.
</div>