Skip to content

Instantly share code, notes, and snippets.

@thet

thet/tabs.html

Created November 27, 2024 12:33
Show Gist options
  • Save thet/1a45d12aef06433b8f70c41d8fe997f2 to your computer and use it in GitHub Desktop.
Save thet/1a45d12aef06433b8f70c41d8fe997f2 to your computer and use it in GitHub Desktop.
Download ZIP
HTML details based tabs
Raw
tabs.html
<DOCTYPE html>
<html>
<head>
<style>
/* Details marker on form tabs. Hide it. */
details.tab summary::-webkit-details-marker,
details.tab summary::marker {
content: "";
opacity: 0;
display: none;
}
.tab1[open] ~ .tab__content--tab1,
.tab2[open] ~ .tab__content--tab2,
.tab3[open] ~ .tab__content--tab3 {
display: block;
}
</style>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
prefix: "tw-",
}
</script>
</head>
<body>
<div
class="
tabs
tw-grid
tw-grid-cols-1
lg:tw-grid-cols-3
"
>
<!--! TAB 1 HEADER -->
<details
name="tab"
class="
tab
tab1
max-lg:tw-order-1
"
open
>
<summary>TAB 1</summary>
</details>
<!--! TAB 2 HEADER -->
<details
name="tab"
class="
tab
tab2
max-lg:tw-order-3
"
>
<summary>TAB 2</summary>
</details>
<!--! TAB 3 HEADER -->
<details
name="tab"
class="
tab
tab3
max-lg:tw-order-5
"
>
<summary>TAB 3</summary>
</details>
<!--! TAB 1 CONTENTS -->
<section
class="
tab__content
tab__content--tab1
tw-hidden
tw-col-span-full
max-lg:tw-order-2
">
<h3>Incident Details 1</h3>
</section>
<!--! TAB 2 CONTENTS -->
<section
class="
tab__content
tab__content--tab2
tw-hidden
tw-col-span-full
max-lg:tw-order-4
">
<h3>Incident Details 2</h3>
</section>
<!--! TAB 3 CONTENTS -->
<section
class="
tab__content
tab__content--tab3
tw-hidden
tw-col-span-full
tw-order-6
max-lg:tw-order-6
">
<h3>Incident Details 3</h3>
</section>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment