From dcfb172704f3afb68a30425029ec834be2883274 Mon Sep 17 00:00:00 2001 From: bt Date: Sat, 8 Jun 2024 13:22:19 -0400 Subject: More content porting, on-going markdown changes for lowdown support --- build/tabbed-content/index.html | 149 +++++++++++++++++++++------------------- 1 file changed, 77 insertions(+), 72 deletions(-) (limited to 'build/tabbed-content') diff --git a/build/tabbed-content/index.html b/build/tabbed-content/index.html index 295a712..cfabe83 100644 --- a/build/tabbed-content/index.html +++ b/build/tabbed-content/index.html @@ -1,102 +1,94 @@ - + Tabbed Content Without JavaScript - - + + +
-

Tabbed Content Without JavaScript

+

Tabbed Content Without JavaScript

+

2019-01-28

+

Creating tabs is a fairly trivial and common practice in web design, but many times it requires JavaScript to properly implement. Fortunately it is possible to create tabbed content with only using CSS.

+

Tabbed elements with only CSS

+

Live CodePen Example

-
-

-

Sidenote:

-

While this method is semantic and accessible, you might consider using a pre-existing plugin for tabbed data.

-

This component tends to feel a little "stiff" compared to more fleshed out variations available. This pure CSS version is better suited as a fallback for when users have disabled JavaScript.

-

-

The HTML

+ +
+ +

The HTML

+

The skeleton for this component is fairly basic - we just need the following structure:

+
    -
  1. Parent element for each tab item
    2. -
  2. Default radio input
    3. -
  3. Label linked to corresponding input
    4. -
  4. Inner content associated with each tab item
    5. +

  5. Parent element for each tab item

    6. +

  6. Default radio input

    7. +

  7. Label linked to corresponding input

    8. +

  8. Inner content associated with each tab item

-
<!-- Simple main container for all elements -->
-<div class="tabs">
 
-    <!-- Parent container holding for individual tab item -->
-    <div class="tab-item">
+
Full HTML for reference:

 
-        <!-- Default radio input -->
-        <input class="tab-input" type="radio" name="tabs" id="tab-1">
+
<div class="tabs">
 
-        <!-- Label connected to radio input via `id` and `for` attributes -->
-        <label class="tab-label" for="tab-1">Tab 1</label>
+    <div class="tab-item">
+        <input class="tab-input" type="radio" name="tabs" id="tab-1">
+        <label class="tab-label" for="tab-1">Tab 1</label>
+        <div class="tab-content">Content goes here</div>
+    </div>
 
-        <!-- Full inner content of current tab item -->
-        <div class="tab-content">Content goes here</div>
+    <div class="tab-item">
+        <input class="tab-input" type="radio" name="tabs" id="tab-2">
+        <label class="tab-label" for="tab-2">Tab 2</label>
+        <div class="tab-content">Content goes here</div>
+    </div>
 
-    </div>
+    <div class="tab-item">
+        <input class="tab-input" type="radio" name="tabs" id="tab-3">
+        <label class="tab-label" for="tab-3">Tab 3</label>
+        <div class="tab-content">Content goes here</div>
+    </div>
 
-</div>
-

-
Full HTML for reference:

-
<div class="tabs">
-
-    <div class="tab-item">
-        <input class="tab-input" type="radio" name="tabs" id="tab-1">
-        <label class="tab-label" for="tab-1">Tab 1</label>
-        <div class="tab-content">Content goes here</div>
-    </div>
-
-    <div class="tab-item">
-        <input class="tab-input" type="radio" name="tabs" id="tab-2">
-        <label class="tab-label" for="tab-2">Tab 2</label>
-        <div class="tab-content">Content goes here</div>
-    </div>
-
-    <div class="tab-item">
-        <input class="tab-input" type="radio" name="tabs" id="tab-3">
-        <label class="tab-label" for="tab-3">Tab 3</label>
-        <div class="tab-content">Content goes here</div>
-    </div>
-
-</div>
+</div>
 

-
The CSS

+
+
The CSS

+
 
First, we need to set each input, label and inner content into their own parent containers:

-
/* Main parent that holds all contents */
+
+
/* Main parent that holds all contents */
 .tabs {
     height: 100%;
     min-height: 250px;
     position: relative;
 }
 
-/* Each tab items (includes heading & content) */
+/* Each tab items (includes heading & content) */
 .tab-item {
     display: inline;
 }
 

+
 
Next, we will hide the default radio input and design our labels to resemble a basic web tab element. The z-index property on the label is important for how we will be stacking our content on the z-axis (labels above inner content for example).

-
/* Hide the default radio inputs */
+
+
/* Hide the default radio inputs */
 .tab-input {
     position: absolute;
     visibility: hidden;
 }
 
-/* The main tab headings */
+/* The main tab headings */
 .tab-label {
     background: white;
     box-shadow: inset 0 -4px 4px rgba(0,0,0,0.02);
@@ -111,8 +103,10 @@
     z-index: 0;
 }
 

-
The main inner content of each tab needs to have an absolute position set as it's default, since the one currently selected will switch to relative on mobile (more on that in a moment):

-
/* The inner tab content */
+
+
The main inner content of each tab needs to have an absolute position set as it’s default, since the one currently selected will switch to relative on mobile (more on that in a moment):

+
+
/* The inner tab content */
 .tab-content {
     background: white;
     bottom: 0;
@@ -126,8 +120,10 @@
     z-index: 0;
 }
 

+
 
The final step is just telling the browser to style both the label and inner content of the currently selected radio input:

-
/* Style the currently selected tab label */
+
+
/* Style the currently selected tab label */
 .tab-input:checked + .tab-label {
     border: 1px solid #eee;
     border-bottom: 0;
@@ -136,32 +132,34 @@
     z-index: 2;
 }
 
-/* Show the currently selected tab content */
+/* Show the currently selected tab content */
 .tab-input:checked ~ .tab-content {
     border: 1px solid #eee;
     z-index: 1;
 }
 

-
It's as simple as that! For reference, here is the entire CSS file for easier access:

-
/* Main parent that holds all contents */
+
+
It’s as simple as that! For reference, here is the entire CSS file for easier access:

+
+
/* Main parent that holds all contents */
 .tabs {
     height: 100%;
     min-height: 250px;
     position: relative;
 }
 
-/* Each tab items (includes heading & content) */
+/* Each tab items (includes heading & content) */
 .tab-item {
     display: inline;
 }
 
-/* Hide the default radio inputs */
+/* Hide the default radio inputs */
 .tab-input {
     position: absolute;
     visibility: hidden;
 }
 
-/* The main tab headings */
+/* The main tab headings */
 .tab-label {
     background: white;
     box-shadow: inset 0 -4px 4px rgba(0,0,0,0.02);
@@ -176,7 +174,7 @@
     z-index: 0;
 }
 
-/* The inner tab content */
+/* The inner tab content */
 .tab-content {
     background: white;
     bottom: 0;
@@ -190,7 +188,7 @@
     z-index: 0;
 }
 
-/* Style the currently selected tab label */
+/* Style the currently selected tab label */
 .tab-input:checked + .tab-label {
     border: 1px solid #eee;
     border-bottom: 0;
@@ -199,14 +197,17 @@
     z-index: 2;
 }
 
-/* Show the currently selected tab content */
+/* Show the currently selected tab content */
 .tab-input:checked ~ .tab-content {
     border: 1px solid #eee;
     z-index: 1;
 }
 

-
Don't forget about mobile

+
+
Don’t forget about mobile

+
 
With only a few extra lines of CSS we can ensure that our custom tabs will stack on top of each other and look solid on mobile devices:

+
 
@media(max-width:38em) {
     .tab-label {
         display: block;
@@ -223,9 +224,13 @@
     }
 }
 

-
One minor caveat

-
Even though I'm a pretty big fan of implementing tabs this way, there is a small drawback:

-
The height of the inner content doesn't grow dynamically since it defaults as absolute, so a min-height or height value is required on the parent element. This could become a problem in certain situations where you don't have the luxury of setting a static height.

+
+
One minor caveat

+
+
Even though I’m a pretty big fan of implementing tabs this way, there is a small drawback:

+
+
The height of the inner content doesn’t grow dynamically since it defaults as absolute, so a min-height or height value is required on the parent element. This could become a problem in certain situations where you don’t have the luxury of setting a static height.

+
 
Other than that, enjoy building some JavaScript-free tabs!