Dreevoo.com | Online Learning and Knowledge Sharing
Home | Programs | Programming languages | HTML | jQuery panel to show info about cookies
Click to view your profile

jQuery panel to show info about cookies

This tutorial will show you a way of implementing a customized solution to the impending EU cookie law by showing an info panel using jQuery.

  Author: podtalje | Version: Demo | 16th June 2013 |  

The EU Cookie Law is the EU e-Privacy Directive and defines that you have to get your visitors informed consent before placing a cookie on their machine.

This tutorial will show you how to implement a customized solution on your web page.


First we will define a message that will be shown to the users and add "I Agree" button which will hide the message for ever.

Place the code after the <body> tag.

<div id="message">
Cookies help us deliver our services. By using our services, you agree to our use of cookies.
<button class="buttons" onClick="hideForever();">I Agree</button>

Of course you can change the message to suite your needs.


Use CSS to style your message.

It is important that that you use display: none, so that the message will initially be hidden.


On the image you can see an example of the message that will later be shown in the demo.


In your document set the reference to the CSS file you are using.
<link rel="stylesheet" href="cookies.css">

We will also be using some javascript.
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/jquery.cookie.js"></script>
<script src="js/cookies.js"></script>

jQuery will be used to show, hide and slide the panel.
We will use jquery.cookie to manipulate with cookies.
In cookies.js we will write our own code which is described below.


Now open the file cookies.js.

$(document).ready is executed when the page is loaded.

If the user has not yet confirmed the use of cookies, we will show a our message with one second delay.

    if ($.cookie('cookies_enable')) {
    } else {


Now we also add some useful functions below.

// To hide the message but show it again on page reload
function hideMessage(){

// To hide the hide the message and set the cookie so when the page is reloaded the message does not appear
function hideForever(){
  $.cookie('cookies_enable', 'foo', { expires: 180 });

// Optional function to show message manually on the demo page
function showMessage(){

// Delete cookie

function deleteCookie() {


You can now use this functions in onClick event to control the message panel from your web page.

<button onClick="showMessage();" class="buttons">Show cookie message</button>

<button onClick="hideMessage();" class="buttons">Hide cookie message</button>

<button onClick="deleteCookie();" class="buttons">Delete confirmation cookie</button>


The result should now look similar to the image on the left.

You can of course use CSS to set the style of the text and buttons.


We will now use if statement in javascript to check if the user has confirmed the use of cookies by checking if there is a cookie named cookies_enable present.

<script type="text/javascript">
if ($.cookie('cookies_enable')) {

Below is an example to enable Google Analytics.

<script type="text/javascript">
if ($.cookie('cookies_enable')) {

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-123456-78']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
}  //end: if cookie


To see how the final result looks like check our DEMO page.

And complete source code from this tutorial can be found on link SOURCE CODE

If you have any problems or question about this tutorial just ask on forum and we will do our best to help you.

  Please login to post a comment
  Click to open user profile  
GoXBet, 20th Jul 2021, 8:59 AM
Гоу икс бет казино или же [url=https://goxbet-casino.cyou/GoXBet] Casino[/url] является официальным онлайн заведением на територии СНГ!
  Click to open user profile  
GoXBet, 24th Jul 2021, 4:58 PM
Гоу икс бет казино или же [url=https://goxbet-casino.cyou/GoXBet] Casino[/url] является официальным онлайн заведением на територии СНГ!
  Click to open user profile  
thefansbuzz, 19th Feb 2023, 7:33 PM
Cheap SMM Panel Social Media Marketing is a huge field with a lot of competition. If you want to stand out from the crowd, you need to know how to find ways to make your content go viral. If you are interested in using social media to market your product, this service is perfect for you. The panel gives you access to hundreds of different social media sites, so that you can find new ways to market your business. Visit our website at: https://thefansbuzz.com/
online learning made for people