JSFiddle - React, Tailwind, and code Playground

by Garfrey

HTML

<div id="wrap">
<a href="#" id="example-show" class="showLink" data-showhide="example">
<button class="btn-u btn-u-lg btn-block btn-u-dark-orange">
Read More
</button>
</a>

    <div id="example" class="more">
        <iframe width="600" height="315" src="//www.youtube.com/embed/BaPlMMlyM_0" frameborder="0" allowfullscreen></iframe>
        <p>Congratulations! You've found the magic hidden text! Clicking the link below will hide this content again.</p>
    </div>
</div>
<script type='text/javascript' src='http://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js'></script>

CSS

.more {
    display: none;
    border-top: 1px solid #666;
    border-bottom: 1px solid #666;
}
a.showLink, a.hideLink {
    text-decoration: none;
    color: #36f;
    padding-left: 8px;
    background: transparent url(down.gif) no-repeat left;
}
a.hideLink {
    background: transparent url(up.gif) no-repeat left;
}
a.showLink:hover, a.hideLink:hover {
    border-bottom: 1px dotted #36f;
}

JavaScript

function showHide() {
    var shID = $(this).data("showhide"); // Use lower case only in data
    if (document.getElementById(shID + '-show').style.display != 'none') {
        // Showing div so set cookie to 0
        jQuery.cookie("showhide-"+shID, 0);
        document.getElementById(shID + '-show').style.display = 'none';
        document.getElementById(shID).style.display = 'block';
    } else {
        // Hiding div so set cookie to 1
        jQuery.cookie("showHide-"+shID, 1);
        document.getElementById(shID + '-show').style.display = 'inline';
        document.getElementById(shID).style.display = 'none';
    }
}

jQuery(document).ready(function () {
	
	$("#example-show").on("click", showHide);
    
	if (jQuery.cookie("showhide-" + "example") == '1') {
        // Cookie set to hide, so do nothing as div is hidden by default
    } else {
        // Cookie not set so show div
        $("#example-show").trigger("click"); // Needs to be done via simulating button click so that the 'this' is set to the button
    }
});