JSFiddle - React, Tailwind, and code Playground

HTML

<section class="fullLength">
    <nav class ="subjectBar">
		<ul buttonlist>
			<button>Reading</button>
			<button>Math</button>
			<button>Science</button>
			<button>English</button>
			<button>Homework</button>
			<button>Study Skills</button>
			<button>Summer Camps</button>
		</ul>
	</nav>
</section>
<section class="readingContent">
	<div data="reading">
		<h1>Reading</h1>
		<p></p>
	</div>
	<div data="math">
		<h1>Math</h1>
		<p></p>
	</div>
  	<div data="science">
		<h1>Science</h1>
		<p></p>
	</div>
	<div data="english">
		<h1>English</h1>
		<p></p>
	</div>
		<div data="homework">
		<h1>Homework</h1>
		<p></p>
	</div>
	<div data="studyskills">
		<h1>Study Skills</h1>
		<p></p>
	</div>
	<div data="summercamps">
		<h1>Summer Camps</h1>
		<p></p>
	</div>
</section>

CSS

.readingContent, .readingContent div{
		display: none;
	}

JavaScript

init=function(){
		$('[buttonlist] button').click(function(d){					// bind to button clicks
      var pressed = $(this).html().toLowerCase().replace(/\s/g, ''); 			// what was pressed?
      $( '.readingContent div' ).hide();								// hide all elements again
			$( '.readingContent, div[data=' + pressed + ']' ).show();	// show the element pressed
		})
	};

	$(document).ready(function(){ init(); });