easy tab component, pure js + css, without react

This is tab example 1

Passion Organization Content Engagement this is passion pannel this is organization pannel this is engagement pannel

This is tab example 2

Passion Organization Content Engagement this is passion pannel 2 this is organization pannel 2 this is engagement pannel 2

end test

This is haha node

styles

<style>
.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
.tabs {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none; 
}
ol, ul {
    margin-top: 0;
    margin-bottom: 10px;
}
.tabs > li {    
    margin-bottom: -1px;
    position: relative;
    display: inline-block; 
 padding: 6px 12px;
 border-radius: 5px 5px 0 0;
 background-color: #aac4bd;
 border: 2px solid #7ea299;
 margin-right: 2px;
 color: #fff;
 cursor: pointer;
}
.tabs > li.active {
 background-color: #fbfbfc;
 border-bottom: 0;
 padding-bottom: 8px;
 color: #7ea299; 
}
.tabs > li:hover {
 background-color: #fbfbfc;
 color: #7ea299;  
}
.tabcontent {
 border: 2px solid #7ea299;
 -webkit-box-shadow: .055rem .055rem 1.11rem hsla(0,0%,8%,.27);
 box-shadow: .055rem .055rem 1.11rem hsla(0,0%,8%,.27);
 background-color: #fbfbfc;
 margin: -1px 0 0;
 padding: 4px; 
}
.tabcontent > .panel {
    display: none;
}
.tabcontent > .active {
    display: block;
}
</style>

use example

<div>
This is tab example 1
</div>
<Tabs>
<TabList>
  <Tab>Passion</Tab>
  <Tab>Organization Content</Tab>
  <Tab>Engagement</Tab>
</TabList>
<TabPanel>
  this is passion pannel
</TabPanel> 
<TabPanel>
this is organization pannel
</TabPanel>
<TabPanel>
this is engagement pannel
</TabPanel> 
</Tabs>
<div>
This is tab example 2
</div>
<Tabs>
<TabList>
  <Tab>Passion</Tab>
  <Tab>Organization Content</Tab>
  <Tab class='active'>Engagement</Tab>
</TabList>
<TabPanel>
  this is passion pannel 2
</TabPanel> 
<TabPanel>
this is organization pannel 2
</TabPanel>
<TabPanel>
this is engagement pannel 2
</TabPanel> 
</Tabs>
<div>
end test
</div>

javascript

<script type="text/javascript">
document.querySelectorAll('Tabs').forEach(function(tabs) {
  let pn = tabs.parentNode;
  let ct = document.createElement('div');
  ct.className = 'container';
  let ul = document.createElement('ul');
  ul.className = 'tabs';
  ct.appendChild(ul);
  let ai = 0;
  let index = 0;
  tabs.querySelectorAll('Tab').forEach(function(tab) {
    let li = document.createElement('li');
 li.className = tab.className;
 if (li.className.indexOf('active') != -1) {
   ai = index;
 }
 li.innerText = tab.innerText;
 li.id = index;
 li.onclick = function(e) {
   e = e || window.event;
      let target = e.target || e.srcElement;
   if (target.className.indexOf('active') != -1)
     return;  
   let ft = target.parentNode.querySelector('.active');
   ft.className = ft.className.replace('active', '');
   target.className = target.className + " active";
   let cp = target.parentNode.parentNode.querySelector('.tabcontent .active');
      cp.className = cp.className.replace('active', '');
   cp = target.parentNode.parentNode.querySelector('.tabcontent #panel'+target.id);
      cp.className = cp.className + " active";
   // target.parentNode.parentNode.style.display = 'block';
 }
    ul.appendChild(li); 
 index = index+1;
  });
  if (ai == 0) {
    if (ul.firstChild.className.indexOf('active') == -1) {
   ul.firstChild.className += ' active';
 }
  }
  let tc = document.createElement('div');
  tc.className = 'tabcontent';
  ct.appendChild(tc);
  index = 0;
  tabs.querySelectorAll('TabPanel').forEach(function(tabpanel) {
    let pl = document.createElement('div');
 pl.className = 'panel';
 pl.id = 'panel'+index;
 if (index == ai) {
   pl.className += ' active';
 }
 pl.innerHTML = tabpanel.innerHTML;
 tc.appendChild(pl);
 index = index+1;
  });
  pn.insertBefore(ct, tabs);
  pn.removeChild(tabs);
});
</script>

❤️ Support This Blog

---

If this post helped you, you can support my writing with a small donation. Thank you for reading.

---

Coffee ☕ Thanks 🙏 Extra Support ❤️