JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.githubusercontent.com/carhartl/jquery-cookie/master/jquery.cookie.js"></script>
<a href="#" id="slide1">Slide Toggle +</a>
<div class="slide1panel" style="display:none; background-color:#4CF;width:100px;height:200px;"></div>

JavaScript

$(document).ready(function() {
    // check the cookie when the page loads
    alert($.cookie('currentToggle'));
    if ($.cookie('currentToggle') === 'visible') {
        togglePanel(true);
    }

    //handle the clicking of the show/hide toggle button
    $('#slide1').click(function() {
        //toggle the panel as required, base on current state
        if ($('#slide1').text() === "Slide Toggle +") {
            togglePanel(true);
        }
        else {
            togglePanel(false);
        }
    });
});

function togglePanel(show) {
    var panel = $('.slide1panel');
    var button = $('#slide1');
    if (show) {
        panel.slideToggle('slow');
        button.text('Slide Toggle -');
        $.cookie('currentToggle', 'visible', { path: '/' });
    } else {
        panel.slideToggle('slow');
        button.text('Slide Toggle +');
        $.cookie('currentToggle', 'hidden', { path: '/' });
    }
}