From 74b84dbe994ed61a31d8b78634beb756b8c434cd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Zoe=CC=88=20Bijl?= Date: Mon, 7 Oct 2019 10:37:26 +0200 Subject: [PATCH] Tabs Example: use display: none; to hide panels (Issue #1197) --- examples/tabs/css/tabs.css | 4 ++++ examples/tabs/tabs-1/js/tabs.js | 6 +++--- examples/tabs/tabs-1/tabs.html | 6 +++--- examples/tabs/tabs-2/js/tabs.js | 6 +++--- examples/tabs/tabs-2/tabs.html | 4 ++-- 5 files changed, 15 insertions(+), 11 deletions(-) diff --git a/examples/tabs/css/tabs.css b/examples/tabs/css/tabs.css index cf830832fe..286427fed1 100644 --- a/examples/tabs/css/tabs.css +++ b/examples/tabs/css/tabs.css @@ -78,6 +78,10 @@ background: hsl(220, 43%, 99%); } +[role="tabpanel"].is-hidden { + display: none; +} + [role="tabpanel"]:focus { border-color: hsl(20, 96%, 48%); box-shadow: 0 0 0.2em hsl(20, 96%, 48%); diff --git a/examples/tabs/tabs-1/js/tabs.js b/examples/tabs/tabs-1/js/tabs.js index 224d4ba2da..7966b70035 100644 --- a/examples/tabs/tabs-1/js/tabs.js +++ b/examples/tabs/tabs-1/js/tabs.js @@ -159,8 +159,8 @@ // Get the value of aria-controls (which is an ID) var controls = tab.getAttribute('aria-controls'); - // Remove hidden attribute from tab panel to make it visible - document.getElementById(controls).removeAttribute('hidden'); + // Remove is-hidden class from tab panel to make it visible + document.getElementById(controls).classList.remove('is-hidden'); // Set focus when required if (setFocus) { @@ -177,7 +177,7 @@ }; for (p = 0; p < panels.length; p++) { - panels[p].setAttribute('hidden', 'hidden'); + panels[p].classList.add('is-hidden'); }; }; diff --git a/examples/tabs/tabs-1/tabs.html b/examples/tabs/tabs-1/tabs.html index 7ac922f445..7cabc2eefd 100644 --- a/examples/tabs/tabs-1/tabs.html +++ b/examples/tabs/tabs-1/tabs.html @@ -22,7 +22,7 @@
  • Related Issues
  • Design Pattern
    • - +

    Example of Tabs with Automatic Activation

    @@ -51,11 +51,11 @@

    Example

    Nils Frahm is a German musician, composer and record producer based in Berlin. He is known for combining classical and electronic music and for an unconventional approach to the piano in which he mixes a grand piano, upright piano, Roland Juno-60, Rhodes piano, drum machine, and Moog Taurus.

    -