JSFiddle - React, Tailwind, and code Playground

by Kelly Hawker

HTML

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<div id="adPanelCon">
<div id="close" class="active">^</div><div id="open">X</div>
<div id="adPanel">
<div class="pad">
<h3>
DEMO
</h3>
<p>
Content
</p>
</div>
</div>
</div>

CSS

body { background:#333; }
#adPanelCon { position:fixed; bottom:0; right:20px; width:350px; }
#adPanel { position:relative; background:#fff; display:none; }
#open, #close { width:30px; height:30px; line-height:30px; background:#ccc; text-align:center; cursor:pointer; font-size:20px; position:absolute; top:-30px; right:0; }
#adPanelCon .active { display:none; }
#adPanel .pad { padding:20px; }

JavaScript

$(document).ready(function () {
    if ($.cookie('myCookieName')) {
        $("div#adPanel").hide();
    }
});

$(document).ready(function(){

    $("div#adPanel").hide();

    var autoTimer = null;
    
    autoTimer = setTimeout(function(){
        $("div#adPanel").slideUp("slow");
        autoTimer = setTimeout(function(){
            $("div#adPanel").slideDown("slow");
        }, 500);
    },500);

    $("#open").click(function(){
        $("div#adPanel").slideUp("slow");
        $("div#close, div#open").toggleClass('active');
        if(autoTimer) clearTimeout(autoTimer);
        autoTimer = null;
    }); 

    $("#close").click(function(){
        $("div#adPanel").slideDown("slow"); 
        $("div#close, div#open").toggleClass('active');
        if(autoTimer) clearTimeout(autoTimer);
    });         

    var date = new Date();
    var minutes = 5;
    date.setTime(date.getTime() + (minutes * 60 * 1000));
    $.cookie("myCookieName", "foo", { expires: date });
});