JSFiddle - React, Tailwind, and code Playground

HTML

<div id="page">
    <div id="menu">
        <ul>
            <h3 class="books" >Books</h3>
            <h3 class="books" >Bo444oks</h3>
            <h3 class="books" >Bossdfdsoks</h3>
        </ul>
    </div>
    <hr />
    <div id="com" >
        <div style="display:none">This layer displays a range of books</div>
       <div style="display:none">This layer displays a  bodffffffffffffffffffffffffffffffoks</div>
         <div style="display:none">This layer displays a range of bodsfsdfsdfsdf63453453454oks</div>
    </div>
</div>

JavaScript

$('#menu h3').on('click', function () {
    var $matchingDIV = $('#com div' + $(this).attr('class'));

    $matchingDIV.toggle(!$matchingDIV.is(':visible'));
});