JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<nav>
  <button data-name="matrix-view-1">View #1</button>
  <button data-name="matrix-view-2">View #2</button>
  <button data-name="matrix-view-3">View #3</button>
  <button data-name="matrix-view-4">View #4</button>
  <button data-name="matrix-view-5">View #5</button>
</nav>
<section data-name="matrix-view-1" class="show">Matrix View #1</section>
<section data-name="matrix-view-2">Matrix View #2</section>
<section data-name="matrix-view-3">Matrix View #3</section>
<section data-name="matrix-view-4">Matrix View #4</section>
<section data-name="matrix-view-5">Matrix View #5</section>

CSS

section{
  padding: 100px;
  background-color: aliceblue;
  display: none;
}
section.show{
  display: block;
}

JavaScript

$('nav>button').click(function(){

	$('section').removeClass('show');
  
  var name = $(this).attr('data-name');
  
  console.log('name',name);
  console.log('text',$(this).text());
  
  $('section[data-name="' + name + '"]').addClass('show');

});