Tabs example solution (stackoverflow)

https://stackoverflow.com/questions/72769221/aligning-tab-links-horizontally-above-tab-content-without-using-absolute-positio Modified to use flexbox ordering for the tabs

by rhelminen

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SCSA tabs</title>
</head>
<body>
    <h1>Tab content</h1>

    <div class="accordion-tabs-minimal">
        <a href="#" class="tab-link" onclick="changeTab(event);">Tab 1</a>
        <div class="tab-content" data-open="false">
            <p>Tab 1 content</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent id tristique enim. Fusce dui dui, rhoncus eu eleifend a, molestie at neque. Maecenas vitae leo scelerisque, cursus nisi id, tempor ligula. Sed hendrerit in ante vel congue. Phasellus mi nisi, bibendum vel pharetra in, efficitur a libero. Nunc dignissim, ipsum eu dapibus egestas, ligula sem dapibus massa, sodales sodales diam nisi ac libero. In feugiat ipsum nec dapibus malesuada. Suspendisse quis purus quis dui elementum mattis sit amet id augue. Ut elementum, nisi eu vulputate lacinia, augue lacus interdum nibh, in congue sapien magna vitae lectus. Donec in quam vulputate, aliquam sapien eget, iaculis dolor. Nunc magna nulla, viverra vitae bibendum ut, tincidunt ac nunc. Proin vestibulum cursus leo, quis gravida nisi aliquet ac.</p>
        </div>

        <a href="#" class="tab-link" onclick="changeTab(event);">Tab 2</a>
        <div class="tab-content" data-open="false">
            <p>Tab 2 content</p>
            <p>Quisque vehicula, libero sed consectetur gravida, mi ipsum tincidunt lorem, a congue est tortor vitae libero. Praesent vitae ex facilisis, dapibus nibh non, imperdiet est. Duis pellentesque, nisl non placerat dictum, risus velit porttitor dui, ac molestie tellus turpis at dui. In hac habitasse platea dictumst. Curabitur eget enim egestas, dapibus arcu at, suscipit sapien. Aliquam ut dapibus massa. Phasellus eget congue sem. Aliquam a congue velit, ac cursus leo. Curabitur varius risus sed congue...

CSS

body {font-family: 'Arial', sans-serif;}

        .accordion-tabs-minimal {
            width: 900px;
            margin: 0 auto;
            padding: 0;
            list-style: none;
            display: flex;
            flex-wrap: wrap;
        }
        
        .tab-content {
            order: 1;
            width: 100%;
        }

        .tab-link {
            display: inline-block;
            background-color: rgb(234, 234, 234);
            padding: 0.5rem 1rem;
            border-top-left-radius: 0.5rem;
            border-top-right-radius: 0.5rem;
            color: black;
            text-decoration: none;
        }

        .tab-active {
            background-color: #300b4c;
            color: white;
        }

        [data-open="false"] {
            display: none;
        }

        [data-open="true"] {
            display: block;
            border-top: 1px solid lightgrey;
        }

JavaScript

// once page is loaded, display first tab content and make first tab active
const tabContainer = document.querySelector('.accordion-tabs-minimal');
const tabs = document.querySelector('.accordion-tabs-minimal').children;

if(tabContainer){
    tabs[0].classList.add('tab-active');
    tabs[1].setAttribute('data-open', 'true');
}

function changeTab(e) {
    e.preventDefault();
    
    // when tab is clicked, remove tab-active from all tabs and set data-open on all sections to false
    Array.from(tabs, tab => {
        if(tab.classList.contains('tab-link')) {
            tab.classList.remove('tab-active');
            tab.nextElementSibling.setAttribute('data-open', 'false');
        }
    });

    // then add tab active to current tab and set data-open to true on section associated to clicked tab
    e.target.classList.add('tab-active');
    e.target.nextElementSibling.setAttribute('data-open', 'true');
}