Skip to content

Instantly share code, notes, and snippets.

@greghunt

greghunt/data-tabs.js

Last active June 10, 2021 14:10
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save greghunt/ea1bde4e9131cce27756093a002f2775 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save greghunt/ea1bde4e9131cce27756093a002f2775 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Greg Hunt revised this gist Jun 10, 2021. 1 changed file with 1 addition and 2 deletions.
    3 changes: 1 addition & 2 deletions data-tabs.js
    View file
    Original file line number Diff line number Diff line change
    @@ -2,13 +2,12 @@ function chooseTab( tabEl ) {
    const activeClasses = tabEl.getAttribute('data-tab-active-class').split(" ");
    const name = tabEl.getAttribute('data-tab');
    const tabGroup = tabEl.closest('[data-tabs]');
    const tabContent = tabGroup.querySelector('[data-tab-content]');

    tabGroup.querySelectorAll('[data-tab]').forEach(el =>
    el == tabEl ? el.classList.add(...activeClasses) : el.classList.remove(...activeClasses)
    )

    tabContent.querySelectorAll('[data-tab-name]').forEach(el =>
    tabGroup.querySelectorAll('[data-tab-name]').forEach(el =>
    el.style.display = el.dataset.tabName !== name ? 'none' : ''
    )
    }
  2. Greg Hunt created this gist Jun 1, 2021.
    25 changes: 25 additions & 0 deletions data-tabs.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,25 @@
    function chooseTab( tabEl ) {
    const activeClasses = tabEl.getAttribute('data-tab-active-class').split(" ");
    const name = tabEl.getAttribute('data-tab');
    const tabGroup = tabEl.closest('[data-tabs]');
    const tabContent = tabGroup.querySelector('[data-tab-content]');

    tabGroup.querySelectorAll('[data-tab]').forEach(el =>
    el == tabEl ? el.classList.add(...activeClasses) : el.classList.remove(...activeClasses)
    )

    tabContent.querySelectorAll('[data-tab-name]').forEach(el =>
    el.style.display = el.dataset.tabName !== name ? 'none' : ''
    )
    }

    document.querySelectorAll('[data-tab-active]').forEach((tabEl) => {
    chooseTab( tabEl )
    });

    document.querySelectorAll('[data-tab]').forEach((element) => {
    element.addEventListener('click', (event) => {
    event.preventDefault();
    chooseTab(element)
    });
    });
    8 changes: 8 additions & 0 deletions tabs.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,8 @@
    <div data-tabs>
    <button data-tab-active data-tab="img-1" data-tab-active-class="active another-active">Show Image 1</button>
    <button data-tab="img-2" data-tab-active-class="active another-active">Show Image 2</button>
    <div data-tab-content>
    <img data-tab-name="img-1" src="http://placekitten.com/549/569" width="549" height="569" />
    <img data-tab-name="img-2" src="http://placekitten.com/550/550" width="550" height="550" />
    </div>
    </div>