JSFiddle - React, Tailwind, and code Playground

by moojjoo

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<div class="dropdown-notification text-center">
      Hi, I'm a drop down <button class="close">Close</button>
   </div>

<button class="delete-cookie">Delete/Reset Cookie</button>

CSS

body {margin: 0;}
.dropdown-notification {
   height: 40px;
   line-height: 40px;
   position: relative;
   top: -50px;
   transition: top .2s;
    text-align: center;
    background: black;
    color: white;
}
.dropdown-notification.active {
   top: 0;
}

JavaScript

// Check if cookie 
if ($.cookie("noti") !== "closed") {
   $('.dropdown-notification').addClass('active');
}

// On button click close and add cookie (expires in 100 days)
$('.close').on('click', function(){
   $.cookie("noti", "closed", { expires : 100 });
    $('.dropdown-notification').removeClass('active');
})

$('.delete-cookie').on('click', function(){
   $.cookie("noti", "open");
    $('.dropdown-notification').addClass('active');
})