HTML and CSS: Hiding the cookie bar after clicking "I accept",

Question

I am working on a website and I wanted to know how to hide the cookie notification after clicking “I accept” or something else. I don’t want to use web whales, I want pure HTML (and, if necessary, CSS) or even PHP.

#cookie-bar.fixed {
            position: fixed;
            bottom: 5;
            left: 0;
            z-index: 100;
            
        }

        #cookie-bar {
            line-height: 24px;
            color: #eeeeee;
            text-align: center;
            padding: 3px 0;
            width: 100%;
            color: white;
            background-color: #444;
            
            
        }

        .cb-enable {
            border-radius: 10%;
            margin-left: 100px;
            color: white;
            padding: 5px;   
            border-radius: 10%;
            font-family: serif;
            text-decoration: none;
            transition: .3s background-color;
            
            
            
         }
        
        .cb-enable:hover {
            background-color: darkcyan;
        }
        
        .cb-policy {
            color: white;
            text-decoration: underline;
        }
        
        .cb-policy:hover {
            color: darkcyan;
        }

   <div id="cookie-bar" class="fixed">
     <p>We use cookies to enhance your experience in our web site. By visiting it, you agree our <a href="/privacy-policy/#cookies" class="cb-policy">Cookies Policy</a>
       <a href="#" class="cb-enable">I Understand</a>
       </p>
    
  </div>

Run code

Many thanks.

Answer 1

This is the part of the code that I use for all my projects. This is pretty easy to understand. All you have to do is create a cookie with javascript as soon as the user clicks “ok” and then you will check if the cookie is set. If so, a disclaimer will not be displayed.

<?if (!isset($_COOKIE["disclaimer"])){?>
    <div id="cookie_disclaimer">
        <div>
            <div class="titolo">COOKIE POLICY</div>

            blablabla cookie disclaimer blablabla

            <span id="cookie_stop">Ok</span>
        </div>
    </div>
<?}?>



<script type="text/javascript">
$(function(){
     $('#cookie_stop').click(function(){
        $('#cookie_disclaimer').slideUp();

        var nDays = 999;
        var cookieName = "disclaimer";
        var cookieValue = "true";

        var today = new Date();
        var expire = new Date();
        expire.setTime(today.getTime() + 3600000*24*nDays);
        document.cookie = cookieName+"="+escape(cookieValue)+";expires="+expire.toGMTString()+";path=/";
     });

});
</script>

javascript/jquery, , , ,

Answer 2

, , cookie . . , localstorage .

JS

window.onload = function(){
    try {
        if(localStorage.getItem("cookie-enable")!="1"){
            document.getElementById("cookie-bar").style.display="block";
        }
        document.getElementById("save-cookie-example").addEventListener( "click", function() {
            localStorage.setItem("cookie-enable", "1");
            document.getElementById("cookie-bar").style.display="none";
        } );
    } catch( e ) {
        return false;
    }
}

CSS

#cookie-bar.fixed {
    position: fixed;
    bottom: 5;
    left: 0;
    z-index: 100;

}

#cookie-bar {
    line-height: 24px;
    color: #eeeeee;
    text-align: center;
    padding: 3px 0;
    width: 100%;
    color: white;
    background-color: #444;
    display:none;
}

.cb-enable {
    border-radius: 10%;
    margin-left: 100px;
    color: white;
    padding: 5px;   
    border-radius: 10%;
    font-family: serif;
    text-decoration: none;
    transition: .3s background-color;



 }

.cb-enable:hover {
    background-color: darkcyan;
}

.cb-policy {
    color: white;
    text-decoration: underline;
}

.cb-policy:hover {
    color: darkcyan;
}

HTML

<div id="cookie-bar" class="fixed">
    <p>We use cookies to enhance your experience in our web site. By visiting it, you agree our <a href="/privacy-policy/#cookies" class="cb-policy">Cookies Policy</a>
        <a href="#" id="save-cookie-example"class="cb-enable">I Understand</a>
    </p>
</div>

Answer 3

What do you think about: onclick="parentNode.remove()"

EDIT:

Does this seem like a charm to me?

onclick="this.parentNode.parentNode.style.display = 'none'"

Jsfiddle

This will work every time you click, if I'm right.

I would suggest using: http://plugins.jquery.com/cookie/