class ta

Class

by DupontTD

HTML

<div id="wrapper">
  <div data-tabname="P1"> La joie venait toujours après la peine Vienne la nuit sonne l'heure Les jours s'en vont je demeure
  </div>
  <div data-tabname="P2">Les mains dans les mains restons face à face Tandis que sous Le pont de nos bras passe Des éternels regards l'onde si lasse Vienne la nuit sonne l'heure Les jours s'en vont
    je demeure
  </div>
  <div data-tabname="P3"> L'amour s'en va comme cette eau courante L'amour s'en va Comme la vie est lente Et comme l'Espérance est violente
  </div>
    <div data-tabname="P4"> La joie venait toujours après la peine Vienne la nuit sonne l'heure Les jours s'en vont je demeure
  </div>
    <div data-tabname="P5"> L'amour s'en va comme cette eau courante L'amour s'en va Comme la vie est lente Et comme l'Espérance est violente
</div>

CSS

button {
  opacity:1;
  background-color : black;
  color : white;
  padding : 10px;
  transition:all 2s ease;
}

.blue{
  color : blue;
}

.b {
  opacity:1;
  background-color : black;
  color : red;
  padding : 10px;
  transition:all 2s ease;
}

.navTab{
  padding : 5px;
}

.hide {
    overflow : hidden;
    opacity:0.5;
    max-height : 0px;
    transition:all 2s ease;

}

.visi {
 
    max-height : 300px;
   overflow : hidden;
  opacity:1;
  background-color : black;
  color : white;
  padding : 10px;
  transition:all 2s ease;
}

Babel + JSX

let handlerClick;

function asTabs(node) {
	
	 let wrapperEl = document.querySelector(`#${node}`),
       dataTab = wrapperEl.querySelectorAll(`div[data-tabname]`);
	
	 handlerClick = (buttonClicked) => { 
                     dataTab.forEach((text) =>  {
                        (buttonClicked.textContent == text.getAttribute("data-tabname")) ? text.classList.add("visi") : text.classList.remove("visi");
                      })     
                         Array.from(wrapperEl.querySelectorAll(`button`), (el) =>  {
                     (buttonClicked == el ) ?   el.classList.add("b") :   el.classList.remove("b");
                          })
                    }
  
    dataTab.forEach(function(text) {
            wrapperEl.insertAdjacentHTML('afterbegin', `<button onclick="handlerClick(this)">${text.getAttribute("data-tabname")}</button>`);
                            text.classList.add("hide");
     });
	    
     wrapperEl.querySelector("button").click();
}

 asTabs("wrapper");


/*
 
 
 
 class asTabs {

     constructor(node) {
    
         this.wrapperEl = document.querySelector(`#${node}`),
         this.dataTab = this.wrapperEl.querySelectorAll(`div[data-tabname]`);
         this.navTab = document.createElement("div");
     }
     
      init = () => {
          this.wrapperEl.insertBefore(this.navTab, this.wrapperEl.firstChild);
          this.dataTab.forEach((text) =>  {
                let button = document.createElement("button");          
                button.textContent = text.getAttribute("data-tabname");
                text.classList.add("hide");
          
                button.addEventListener("click", (evt) => { 
                    this.dataTab.forEach((text) =>  {
                      (evt.target.textContent == text.getAttribute("data-tabname")) ? text.classList.add("visi") : text.classList.remove("visi");
                   })     
                  Array.from(this.navTab.querySelectorAll(`button`), (el) =>  {
                    ...