Set div to opacity 0 on clicking hyperlink

Question

I'm trying to hide the cookies-banner-bloc div when I click Close this message. Where am I going wrong?

HTML:

<div class="cookies-banner-bloc">
    <div class="cookies-banner-container">
        <p>We use cookies on this website.</p>
        <a class="cookies-close-button no-border">Close this Message</a>
    </div>
</div>

CSS:

.hide {
  opacity:0;
}

JS:

$( document ).ready(function() {

    if(getCookie("userclosedalert")=="true"){
          $(".cookies-banner-bloc").addClass('hide');
            removeClass = false;
    }
    $(".cookies-close-button").click(function () {
       document.cookie = "userclosedalert=true";

    });

});

Demo: https://jsfiddle.net/28860gqj/

you can use display none property to hide a div using css. – Billu Aug 21 '17 at 18:10 — Billu, Aug 21 '17 at 18:10

score 2 · Answer 1 · answered Aug 21 '17 at 18:12

You have to add the class after the click event as well:

$( document ).ready(function() {

   if(getCookie("userclosedalert")=="true"){
      $(".cookies-banner-bloc").addClass('hide');
        removeClass = false;
   }
   $(".cookies-close-button").click(function () {
       document.cookie = "userclosedalert=true";
       $(".cookies-banner-bloc").addClass('hide');
   });

 });

So it will work after a reload and after the click event.

Louys Patrice Bessette · Accepted Answer · 2017-08-21T18:31:53.147

I use jQuery cookie to manage cookies.
I find it pretty easy to use.

The documentation about how to use is here... Event if this GitHub page is no longer maintained, it is usefull for the documentation. The most recent CDN is here.

$( document ).ready(function() {

  // A console check on the cookie value.
  console.log( $.cookie("userclosedalert") );

  // if the cookie exist
  if($.cookie("userclosedalert")=="true"){
    $(".cookies-banner-bloc").addClass('hide');
    console.log("cookie found");
  }

  // Set the cookie on click
  $(".cookies-close-button").click(function () {
    $.cookie("userclosedalert","true", {expires: 7, path: "/"}); // Expires isn't mandatory and is in days.
    console.log("cookie setted");
    $(".cookies-banner-bloc").addClass('hide');
  });

});

CodePen

score 1 · Answer 3 · answered Aug 21 '17 at 18:08

You are not checking when you clicking on the button. Just just move your condition inside of click.

However, why you setting and and remove the cookie? I do not see any usage of it here.

$( document ).ready(function() {

    $(".cookies-close-button").click(function () {
       document.cookie = "userclosedalert=true";  
     if(getCookie("userclosedalert")=="true"){
          $(".cookies-banner-bloc").addClass('hide');
            removeClass = false;
    }

    });

});

https://jsfiddle.net/28860gqj/1/

score 1 · Answer 4 · answered Aug 21 '17 at 18:10

getCookie is nowhere defined, so you get this error Uncaught ReferenceError: getCookie is not defined. Maybe you shall use document.cookie. You can find how to read cookies over here:

Reading cookies by name

The rest looks good so far, so after this being fixed, everything should work as intended.

Set div to opacity 0 on clicking hyperlink

4 Answers4