CODEWITHSUNDEEP
javascript
Justin B
Justin B

Reputation: 57

How to show a div until closed only once

I have a div that can be closed from view using the code below. It works fine, but what I'd like to do is only show the div once so that it doesn't reappear if a visitor closes the div and then visits another page on the site (at which point it currently reappears, then for the visitor to have to close it again).

Could anyone help point out how this is possible? (If possible) it would be good to maybe show the div if a visitor revisits the website in the future, but just to show the div once until closed while the visitor is currently on the site.

<div class="fragment">
    <div class="fragment-inner">
        Get 5% off your orders
        <button id="closeButton">close</button>
    </div>
</div>
<script>
    document.getElementById('closeButton').addEventListener('click', function(e) {
    e.preventDefault();
    this.parentNode.style.display = 'none';
    }, false); 
</script>

Upvotes: 2

Views: 568

Answers (3)

fuyushimoya
fuyushimoya

Reputation: 9813

You may use sessionStorage/localStorage to keep the state.

The diff is when user open a new tab or close the browser, if you use session storage, the state will not keep, while localStorage will keep the state until you change the value or clear it.

window.onload = function() {
    var fragment = document.getElementsByClassName('fragment')[0];
    document.getElementById('closeButton').addEventListener('click', function(e) {
        e.preventDefault();
        fragment.style.display = 'none';
        sessionStorage.setItem('close', 'close');
    }, false);

    if (sessionStorage.getItem('close') === 'close') {
        fragment.style.display = 'none';
    }
}

Upvotes: 0

m1crdy
m1crdy

Reputation: 1401

You could set a cookie for this:

document.getElementById('closeButton').addEventListener('click', function(e) {
    e.preventDefault();
    this.parentNode.style.display = 'none';
    // set cookie
    setCookie("closed","true", 100); 
}, false);

function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires="+d.toUTCString();
    document.cookie = cname + "=" + cvalue + "; " + expires;
}

function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i<ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1);
        if (c.indexOf(name) == 0) return c.substring(name.length,c.length);
    }
    return "";
}

Then you can call on every other page the getCookie("closed") function to check if the cookie is set or not. 

if(!getCookie('closed')){
   // call window again
}

Source

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

You can do something like

var btn = document.getElementById('closeButton');
btn.addEventListener('click', function (e) {
    e.preventDefault();
    this.parentNode.style.display = 'none';
    sessionStorage.setItem('fragment', 'hidden');
}, false);
if (sessionStorage.getItem('fragment') == 'hidden') {
    btn.parentNode.style.display = 'none';
}

Demo: Fiddle

Upvotes: 1

Related Questions