Multy Tabs

by George Bash

HTML

<ul>
    <li class="li"><a href="#" id="buttonLinkA">A</a></li>
    <ul>
        <li class="li"><a href="#" id="buttonLinkA1">A1</a></li>
        <li class="li"><a href="#" id="buttonLinkA2">A2</a></li>
        <li class="li"><a href="#" id="buttonLinkA3">A3</a></li>
    </ul>
    <li><a href="#" id="buttonLinkB">B</a></li>
    <li><a href="#" id="buttonLinkC">C</a></li>
</ul>
<div class="content">
    <div id="a1Section1">a1Section1</div>
    <div id="a1Section2">a1Section2</div>
    <div id="a1Section3">a1Section3</div>
    <div id="a1Section4">a1Section4</div>
    <div id="a1Section5">a1Section5</div>
    
    <div id="a2Section1">a2Section1</div>
    <div id="a2Section2">a2Section2</div>
    <div id="a2Section3">a2Section3</div>
    <div id="a2Section4">a2Section4</div>
    <div id="a2Section5">a2Section5</div>

    <div id="a3Section1">a3Section1</div>
    <div id="a3Section2">a3Section2</div>
    <div id="a3Section3">a3Section3</div>
    <div id="a3Section4">a3Section4</div>
    <div id="a3Section5">a3Section5</div>

    <div id="bSection1">bSection1</div>
    <div id="bSection2">bSection2</div>
    <div id="bSection3">bSection3</div>
    <div id="bSection4">bSection4</div>
    <div id="bSection5">bSection5</div>

    <div id="cSection1">cSection1</div>
    <div id="cSection2">cSection2</div>
    <div id="cSection3">cSection3</div>
    <div id="cSection4">cSection4</div>
    <div id="cSection5">cSection5</div>
</div>

CSS

body {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    line-height: 1.8;
    font-weight: 400;
    background: #fff;
    padding: 0;
    margin: 15px;
}

ul {
  display: inline;
  margin-bottom: 20px;
  padding: 0;
}

ul li{
  display: inline-block;
  background: #eee;
}

ul li a{
  padding: 10px 15px;
}

.content div .active{
  display: block;
}

.content div:not(.active){
  display: none;
}

JavaScript

buttonLinkA.addEventListener('click', function(e){
    showSection('a1Section');
    e.preventDefault();
});
buttonLinkA1.addEventListener('click', function(e){
    showSection('a1Section');
    e.preventDefault();
});
buttonLinkA2.addEventListener('click', function(e){
    showSection('a2Section');
    e.preventDefault();
});
buttonLinkA3.addEventListener('click', function(e){
    showSection('a3Section');
    e.preventDefault();
});
buttonLinkB.addEventListener('click', function(e){
    showSection('bSection');
    e.preventDefault();
});
buttonLinkC.addEventListener('click', function(e){
    showSection('cSection');
    e.preventDefault();
});

function showSection(section){
    for(i=1; i<=5; i++){
        if(section == section){
            // section+i.classList.add('show', 'active');
            console.log(section+i);
        } else {
            // section+i.classList.remove('show', 'active');
            console.log(section+i);
        }
    }
}