Skip to content

Instantly share code, notes, and snippets.

@beevk

beevk/multitab-code-editor-html-snippet.html

Last active March 18, 2024 08:51
Show Gist options
  • Save beevk/f6c577b5381e09ec20fe4b80cb0a0f21 to your computer and use it in GitHub Desktop.
Save beevk/f6c577b5381e09ec20fe4b80cb0a0f21 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. beevk renamed this gist Mar 12, 2024. 1 changed file with 0 additions and 0 deletions.
    0 multitab-code-editor-html-snippet → multitab-code-editor-html-snippet.html
    View file
    File renamed without changes.
  2. beevk revised this gist Mar 12, 2024. 2 changed files with 5 additions and 5 deletions.
    2 changes: 1 addition & 1 deletion multitab-code-editor-html-snippet
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    <div>
    <div class="multitab-code-editor">
    <div class="border-b border-gray-200 dark:border-gray-700">
    <nav class="flex space-x-2" aria-label="Tabs" role="tablist">
    <button type="button" class="tab-title" id="tab-1" data-hs-tab="#tab-1" aria-controls="tab-1" role="tab">
    8 changes: 4 additions & 4 deletions style-for-multitab-editor.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,18 +1,18 @@
    button[role="tab"].active {
    .multitab-code-editor button[role="tab"].active {
    color: var(--primary, green);
    border-bottom: 1px solid var(--primary, green);
    }

    /* Hide all content by default */
    div[role="tabpanel"] {
    .multitab-code-editor div[role="tabpanel"] {
    display: none;
    }

    /* Show the active content */
    div[role="tabpanel"].active {
    .multitab-code-editor div[role="tabpanel"].active {
    display: block;
    }

    .tab-title {
    .multitab-code-editor .tab-title {
    //style your tabs here
    }
  3. beevk created this gist Mar 11, 2024.
    84 changes: 84 additions & 0 deletions multitab-code-editor-html-snippet
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,84 @@
    <div>
    <div class="border-b border-gray-200 dark:border-gray-700">
    <nav class="flex space-x-2" aria-label="Tabs" role="tablist">
    <button type="button" class="tab-title" id="tab-1" data-hs-tab="#tab-1" aria-controls="tab-1" role="tab">
    JavaScript
    </button>
    <button type="button" class="tab-title" id="tab-2" data-hs-tab="#tab-2" aria-controls="tab-2" role="tab">
    TypeScript
    </button>
    <button type="button" class="tab-title" id="tab-3" data-hs-tab="#tab-3" aria-controls="tab-3" role="tab">
    Go
    </button>
    </nav>
    </div>

    <div class="mt-3">
    <div id="content-tab-1" class="active" role="tabpanel" aria-labelledby="content-tab-1">
    <pre>
    <code class="language-javascript">
    console.log("Hello World from tab-1")
    </code>
    </pre>
    </div>

    <div id="content-tab-2" class="" role="tabpanel" aria-labelledby="content-tab-2">
    <pre>
    <code class="language-typescript">
    console.log("Hello World from tab-2")
    </code>
    </pre>
    </div>

    <div id="content-tab-3" class="" role="tabpanel" aria-labelledby="content-tab-3">
    <pre>
    <code class="language-go">
    package main

    import "fmt"

    func main() {
    fmt.Println("hello world")
    }
    </code>
    </pre>
    </div>
    </div>
    </div>
    <script>
    // Get all tab buttons and content containers
    var tabButtons = document.querySelectorAll("button[role='tab']");
    var tabContents = document.querySelectorAll("div[role='tabpanel']");

    // Add click event listeners to all tab buttons
    tabButtons.forEach((button) => {
    button.addEventListener("click", handleTabClick);
    });

    // Show the first tab content by default (if needed)
    tabContents[0].classList.add("active");
    tabButtons[0].classList.add("active");

    // Function to handle tab clicks
    function handleTabClick(event) {
    const clickedButton = event.currentTarget;
    const targetContentId = clickedButton.getAttribute("aria-controls");

    // Hide all content first
    tabContents.forEach((content) => {
    content.classList.remove("active");
    });

    // Show the clicked tab's content
    const targetContent = document.getElementById(`content-${targetContentId}`);
    targetContent.classList.add("active");

    // Remove active class from all buttons
    tabButtons.forEach((button) => {
    button.classList.remove("active");
    });

    // Add active class to the clicked button
    clickedButton.classList.add("active");
    };
    </script>
    18 changes: 18 additions & 0 deletions style-for-multitab-editor.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,18 @@
    button[role="tab"].active {
    color: var(--primary, green);
    border-bottom: 1px solid var(--primary, green);
    }

    /* Hide all content by default */
    div[role="tabpanel"] {
    display: none;
    }

    /* Show the active content */
    div[role="tabpanel"].active {
    display: block;
    }

    .tab-title {
    //style your tabs here
    }