While there are numerous third-party solutions available to comply with the cookie EU directive, I prefer to learn how to implement it myself. My specific requirement is that when a user clicks on "Accept", their choice should be remembered for the entire browsing session rather than showing up every time the page is refreshed. Any guidance on achieving this would be greatly appreciated. Thanks!
// Script to display and hide cookie message
$(document).ready(function(){
$(".cookie").toggleClass("cookieDisplayed");
// Function to hide cookie message upon clicking "Accept"
$(".acceptCookies").on("click", function(){
$(".cookie").removeClass("cookieDisplayed");
});
});.cookie {
padding:20px;
font-size:80%;
width:100%;
height:150px;
background:#F55D2D;
color:white;
position:relative;
top:-150px;
transition: top 1.5s;
-webkit-transition: top 1.5s;
-moz-transition: top 1.5s;
}
.cookie button{
margin-left:20px;
position:relative;
left:100px;
background:white;
color:#F55D2D;
border: 0;
border-radius:4px;
}
.cookie button:hover {
background:#F89576;
color:white;
}
.cookie button a {
text-decoration:none;
color:#F55D2D;
}
.cookie.cookieDisplayed {
top:0;
}<html>
<header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
</header>
<body>
<div class="cookie">
<p>We are using cookies to give you the best experience on our site. Cookies are files stored in your browser and are used by most websites to help personalize your web experience.</p>
<p>By continuing to use our website without changing the settings, you are agreeing to our use of cookies.</p>
<button><a href="aboutus.html">More information</a></button>
<button class="acceptCookies">Accept</button>
</div>
</body>
</html>