Replace inline style by hidden attribute

Alex-D · Mar 22, 2022 · 9d9c2f3 · 9d9c2f3
1 parent 39d28a7
commit 9d9c2f3
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 10 deletions.
diff --git a/README.md b/README.md
@@ -19,7 +19,7 @@
 
 Cookies EU banner is an MIT-licensed open source project and completely free to use.
 You can support it's ongoing development by being a backer or a sponsor:
- 
+
 - [Become a backer or sponsor on Patreon](https://www.patreon.com/alexandredemode)
 - [One-time donation via PayPal](https://www.paypal.me/demodealexandre/20eur)
 
@@ -48,7 +48,7 @@ It is a GDPR-compliant way to get cookie consent from visitors.
 Insert the banner before any content at the beginning of the `<body>` element, with these IDs:
 
 ```html
-<div id="cookies-eu-banner" style="display: none;">
+<div id="cookies-eu-banner" hidden>
     By continuing to visit this site, you accept the use of cookies by Google Analytics for statistical purposes.
     <a href="./read-more.html" id="cookies-eu-more">Read more</a>
     <button id="cookies-eu-reject">Reject</button>
@@ -124,10 +124,10 @@ The third parameter (`true` in the example below) define if Cookie EU banner use
 #### waitRemove
 
 If you want add some transition on accept/reject, and want to prevent the premature deletion of the banner, you can add
-`data-wait-remove` attribute to the banner, with the time to wait in milliseconds. 
+`data-wait-remove` attribute to the banner, with the time to wait in milliseconds.
 
 ```html
-<div id="cookies-eu-banner" style="display: none;" data-wait-remove="250">
+<div id="cookies-eu-banner" hidden data-wait-remove="250">
     <!-- ... -->
 </div>
 ```

diff --git a/docs/demo/index.html b/docs/demo/index.html
@@ -58,7 +58,7 @@
     </style>
 </head>
 <body>
-    <div id="cookies-eu-banner" style="display: none;">
+    <div id="cookies-eu-banner" hidden>
         <span>By continuing to visit this site, you accept the use of cookies by Google Analytics for statistical purposes.</span>
         <a href="./read-more.html" id="cookies-eu-more">Read more</a>
         <button id="cookies-eu-reject">Reject</button>

diff --git a/docs/demo/read-more.html b/docs/demo/read-more.html
@@ -30,7 +30,7 @@
     </style>
 </head>
 <body>
-    <div id="cookies-eu-banner" style="display: none;">
+    <div id="cookies-eu-banner" hidden>
         By continuing your visit to this site, you accept the use of cookies by Google Analytics to make visits statistics.
         <a href="./read-more.html" id="cookies-eu-more">Read more</a>
         <button id="cookies-eu-reject">Reject</button>

diff --git a/docs/index.html b/docs/index.html
@@ -120,7 +120,7 @@ <h3 class="section-subtitle">How to use?</h3>
                 </p>
                 <pre><code class="html">
 &lt;body>
-    &lt;div id="cookies-eu-banner" style="display: none;">
+    &lt;div id="cookies-eu-banner" hidden>
         By continuing your visit to this site, you accept the use of cookies by Google Analytics to make visits statistics.
         &lt;a href="./read-more.html" id="cookies-eu-more">Read more&lt;/a>
         &lt;button id="cookies-eu-reject">Reject&lt;/button>
@@ -207,7 +207,7 @@ <h4 class="section-part-title">Option: <code>waitRemove</code></h4>
                 </p>
 
                 <pre><code class="html">
-&lt;div id="cookies-eu-banner" style="display: none;" <span class="highlight">data-wait-remove="250"</span>>
+&lt;div id="cookies-eu-banner" hidden <span class="highlight">data-wait-remove="250"</span>>
     <!-- ... -->
 &lt;/div>
                 </code></pre>

diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "cookies-eu-banner",
   "title": "Cookies EU banner",
   "description": "Manage display of banner to accept/reject cookies from tracking services like Google Analytics",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "main": "dist/cookies-eu-banner.js",
   "homepage": "http://alex-d.github.io/Cookies-EU-banner/",
   "author": {

diff --git a/src/cookies-eu-banner.js b/src/cookies-eu-banner.js
@@ -78,7 +78,11 @@
         addClickListener = this.addClickListener,
         removeBanner = _this.removeBanner.bind(_this, waitRemove);
 
-      banner.style.display = 'block';
+      if (banner.hasAttribute('hidden')) {
+        banner.removeAttribute('hidden');
+      } else {
+        banner.style.display = 'block';
+      }
 
       if (moreLink) {
         addClickListener(moreLink, function () {