JSFiddle - React, Tailwind, and code Playground

by Fabio Dan

HTML

<div class="tabview">
  <div class="tab">
    <button class="tablink" onclick="tab(event, 'tab1')">Tab 1</button>
    <button class="tablink" onclick="tab(event, 'tab2')">Tab 2</button>
  </div>

  <div class="tabcontent" id="tab1">
    <p>
      I am tab 1 content
    </p>
  </div>

  <div class="tabcontent" id="tab2">
    <p>
      I am tab 2 content
    </p>
  </div>
</div>

<div class="tabview">
  <div class="tab">
    <button class="tablink" onclick="tab(event, 'tab1')">Tab 1</button>
    <button class="tablink" onclick="tab(event, 'tab2')">Tab 2</button>
  </div>

  <div class="tabcontent" id="tab1">
    <p>
      I am tab 1 content
    </p>
  </div>

  <div class="tabcontent" id="tab2">
    <p>
      I am tab 2 content
    </p>
  </div>
</div>


<!--Build a tab component using plain HTML/CSS/JavaScript. In case you forget any API method, attribute name, etc, you can search on any reference website like MDN, etc. You are not allowed to search for the solution of the problem. Try to use all the best
practices you know about HTML, CSS and JavaScript to build this component. Mockup: https://i.imgur.com/Qk71XWl.jpg Please make the component fully functional. The content can be static in the HTML. -->



<!--Build a tab component using plain HTML/CSS/JavaScript. In case you forget any API method, attribute name, etc, you can search on any reference website like MDN, etc. You are not allowed to search for the solution of the problem. Try to use all the best
practices you know about HTML, CSS and JavaScript to build this component. Mockup: https://i.imgur.com/Qk71XWl.jpg Please make the component fully functional. The content can be static in the HTML. -->

CSS

.tab {
  overflow: hidden;
  border: 1px solid black
}

.tab button {
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}

.tab button:hover {
  background-color: #ddd;
}

.tab button:active {
  background-color: #ccc;
}

.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

JavaScript

// First implementation. Not handling multiple instances.
function tab(e, tab) {

  let tabcontent = document.getElementsByClassName('tabcontent');
  let tablinks = document.getElementsByClassName('tablinks');

  for (let i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = 'none';
  }

  for (let i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(' active', '');
  }

  document.getElementById(tab).style.display = 'block';
  e.currentTarget.className += ' active';
}


// Second implementation. Trying to handle multiple instances.
class Tab {
  constructor(opts) {
    const { tabs, buttons, activeBtnClass, activeTabClass } = opts;
    let activeIndex = 0;
    let buttonIndex;
    let eventBtn;
    let goToTab;
    let clearActiveClasses;
  }


	/**
  sets event handlers for each button
  @param {number} index is a number of current button
  */
	eventBtn(buttons, index) {
  button.addEventListener('click', (btn) => {
  	btn.preventDefault();
    goToTab(index);
  });
  }
  
  /**
  toggles active class
  
  */
  goToTab(index) {
  	clearActiveClasses()
    // switch classes
		if(index >= 0 && index <= buttons.length) {
    	buttons[index].classList.add(activeBtnClass);
      tabs[index].classList.add(activeTabClass);
      activeIndex = index;
    }
  };
  
  clearActiveClasses() {
  	for(let tab = 0; tab < tabs.length; tab++ ) {
    	tab[tab].classList.remove(activeTabClass);
    }
    
    for(let button = 0; button < buttons.length; button++) {
    	buttons[button].classList.remove(activeBtnClass);
    }
    
    
  }
}

let t = new Tab(event, tab)
console.log('tab', t);