JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<ul>
  <li data-index="0">number 1</li>
  <li data-index="1">number 2</li>
  <li data-index="2">number 3</li>
  <li data-index="3">number 4</li>
  <li data-index="4">number 5</li>
</ul>

JavaScript

$('ul>li').click(function(){

	var index = $(this).attr('data-index');
  
  console.log(index);
  
  switch(index){
  
  	case "0":
    
    // hide all and show number 1
    
    break;
    
    case "1":
    
    // hide all and show number 2
    
    break;
    
    case "2":
    
    // hide all and show number 3
    
    break;
    
    case "3":
    
    // hide all and show number 4
    
    break;
    
    case "4":
    
    // hide all and show number 5
    
    break;
  
  }

});