CODEWITHSUNDEEP
jqueryhtmlcss
michaelmcgurk
michaelmcgurk

Reputation: 6509

Set div to opacity 0 on clicking hyperlink

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/

Upvotes: 0

Views: 58

Answers (4)

Louys Patrice Bessette
Louys Patrice Bessette

Reputation: 33933

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

Upvotes: 2

huda
huda

Reputation: 146

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.

Upvotes: 2

marpme
marpme

Reputation: 2435

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.

Upvotes: 1

Suresh Atta
Suresh Atta

Reputation: 122018

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/

Upvotes: 1

Related Questions