Search code examples
jquerystateful

How to close a div permanently using jQuery

I have 5 pages and I am including a banner in the 1st page, if the user closes the banner in 1st page then the banner should not appear in the other pages too.

$(document).ready(function(){

      $(".alert-banner-hide").on("click", function(){
            $("#alert-banner-container").hide();
      });

});

Could you please help me on this? Thanks in advance.

Solution

  • Use sessionStorage Object to have something stateful :

    For On-close Banner event :

      $(".alert-banner-hide").on("click", function(){
        $("#alert-banner-container").hide();
        sessionStorage.setItem("banner-closed","yes"); //add this instruction
  });

    And

    on Pages load / Document ready :

      // Copy/Paste the whole code below & don't worry 
  $(function(){
         if (sessionStorage.getItem('banner-closed')==="yes"){
              //trigger close banner
             $("#alert-banner-container").hide();
         }
    })