сохранить состояние переключения нескольких элементов при перезагрузке страницы

Question

Я пытаюсь сохранить состояние переключения моих элементов при перезагрузке страницы.Сейчас они закрываются при обновлении.

Я пытался установить cookie на slideToggle, slideUp & slideDown, но я никогда раньше не использовал куки в этом контексте.

jQuery

/* global jQuery */
jQuery( document ).ready( function( $ ) {

    // The element to hide/reveal
    $( '.bodhi-hide-reveal' ).hide();
    $( '.bodhi-reveal-trigger' ).removeClass( 'closed' );

    // The trigger to hide/reveal
    $( '.bodhi-reveal-trigger' ).click( function( e ) {

        e.preventDefault();

        // Target only the next element to hide/reveal and toggle it
        $( this ).next( '.bodhi-hide-reveal' ).slideToggle();

        // Toggle the trigger class
        $( this ).toggleClass( 'closed' );

    });

    // Expand/collapse all button
    $( '.expand-collapse-all' ).click( function( e ) {

        e.preventDefault();

        // Check if there is at least one closed div
        if ( $( '.bodhi-reveal-trigger.closed' ).length ) {

            $( '.bodhi-reveal-trigger' ).removeClass( 'closed' )
            $( '.bodhi-hide-reveal' ).stop().slideUp();

        } else if ( $( '.bodhi-reveal-trigger.opened' ).length )  {

            $( '.bodhi-reveal-trigger' ).addClass( 'opened' )
            $( '.bodhi-hide-reveal' ).stop().slideDown();

        } else {

            $( '.bodhi-hide-reveal' ).slideToggle();

        }

    });

});

HTML

<button class="expand-collapse-all">
    Expand / Collapse All
</button>
<div class="bodhi-reveal-trigger">
    <button>The Trigger</button>
</div>
<div class="bodhi-hide-reveal">
    <p>Some content inside the div that will be hidden and revealed.</p>
</div>
<div class="bodhi-reveal-trigger">
    <button>The Trigger</button>
</div>
<div class="bodhi-hide-reveal">
    <p>Some content inside the div that will be hidden and revealed.</p>
</div>
<div class="bodhi-reveal-trigger">
    <button>The Trigger</button>
</div>
<div class="bodhi-hide-reveal">
    <p>Some content inside the div that will be hidden and revealed.</p>
</div>
<div class="bodhi-reveal-trigger">
    <button>The Trigger</button>
</div>
<div class="bodhi-hide-reveal">
    <p>Some content inside the div that will be hidden and revealed.</p>
</div>

Скрипка

https://jsfiddle.net/Benbodhi/5k9syzhj/