JSFiddle - React, Tailwind, and code Playground

by jasonwilczak

HTML

<div>
  <h1>Some Title</h1>
  <p>some description</p>
  <div>
    <h2>My stuff</h2><button id="showAll">Show All</button>
    <div class="itemList">
      <div class="itemRow">Item 1</div>
      <div class="itemRow">Item 2</div>
      <div class="itemRow">Item 3</div>
      <div id="hiddenItemRow" class="itemRow hidden">Item 4</div>
    </div>
  </div>
</div>

CSS

.hidden {
  display:none;
}

JavaScript

var itemListElement =document.querySelector('div.itemList');
itemListElement.addEventListener('click',function(event){
	if(event.target.classList.contains('itemRow'))
  	alert('clicked: '+event.target.innerHTML);
});
var showAllButton = document.getElementById('showAll');
showAllButton.onclick = function() {
document.getElementById('hiddenItemRow').classList.remove('hidden');
}