Basic Tabs Template

Preview:
alt text

This template was made by MantaRae on JanitorAI. Like this free template and want to show your support?
You can also support me on my Ko-Fi (not necessary but always appreciated!)

Add the credits to your bio if using this template! I do not give permission to use any part of this template for your own templates or commissions/requests.

How To

How To Upload

  • Go to your Profile Settings
  • Copy the entire code below and paste into the About Me section
  • Press Save and enjoy!

The Code

HTML Section:

<div class="tabs">

  <details class="tab-title">
    <summary>Tab Title</summary>
    <div class="tab-panel">
      <p>First chunk of content</p>
    </div>
  </details>

  <details class="tab-title">
    <summary>Long Ass Tab Title Here</summary>
    <div class="tab-panel">
      <p>Second chunk of content</p>
    </div>
  </details>

  <details class="tab-title">
    <summary>Tab Title Again</summary>
    <div class="tab-panel">
      <p>Third chunk of content</p>
    </div>
  </details>

  <details class="tab-title">
    <summary>Another Tab</summary>
    <div class="tab-panel">
      <p>Fourth chunk of content</p>
    </div>
  </details>

</div>

CSS:

<style>
/* Tabs container
   - Holds all tab buttons
   - Allows tabs to wrap if they run out of space */
.tabs {
  position: relative; /* Needed so panels can position under tabs */
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 5px;
}

/* Tab content panel
   - This is the dropdown content area
   - Absolutely positioned under the tabs */
.tab-panel {
  padding: 5px;
  position: absolute;
  right: 0;
  left: 0;
  top: 105%; /* Pushes panel just below the tab row */
  font-family: cardo;
  background: #373840;
  border: 2px solid #6f7782;
  height: 200px;
  z-index: 3; /* Keeps it above other elements */
}

/* Tab button container (<details>)
   - Each tab header box */
.tab-title {
  display: inline-block;
  width: fit-content;
  height: 40px;
  background: #373840;
  border: 2px solid #6f7782;
  text-align: center;
  align-content: center;
  padding: 5px;
}

/* Tab label (<summary>)
   - The clickable text */
.tab-title summary {
  cursor: pointer;
  list-style: none; /* Removes default triangle */
  font-weight: 600;
}

/* When ANY tab is open:
   - Disable clicking other tabs */
.tabs:has(.tab-title[open]) .tab-title {
  pointer-events: none;
}

/* Re-enable clicking on the OPEN tab
   (so it can be closed) */
.tabs:has(.tab-title[open]) .tab-title[open] {
  pointer-events: auto;
}

/* Fade all tab titles when one is open */
.tabs:has(.tab-title[open]) .tab-title summary {
  opacity: 0.6;
}

/* Keep the active tab fully visible */
.tabs:has(.tab-title[open]) .tab-title[open] summary {
  opacity: 1;
}
</style>
Edit

Pub: 31 Jan 2026 04:32 UTC

Edit: 31 Jan 2026 19:07 UTC

Views: 200