JSFiddle - React, Tailwind, and code Playground

HTML

<!-- navigation button that only appears under a smaller screen
resolution -->
    <div role="navigation" aria-label="Main">
    <div class="mainNavTogBtn"><a href="#"><img src="/img/icon-menu.png"
alt="Navigation Menu"></a></div>
    <!--To make search option available, uncomment this code (Part 1/2):
<div class="srchTogBtn"><a href="#"><img src="/img/icon-search.png"
alt="Search"></a></div>-->
    <!-- //end of navigation button markup -->

    <!-- site navigation -->
    <div id="mainNavCtnr">
    <div id="mainNavCtnd">
    <nav id="nav">
    <div id="mainNavTogCont" aria-hidden="false"><ul>
        <li><a href="#mainCont">Skip to Main Content</a></li>
        <li><a href="/">Web Development</a></li>
        <li><a href="web-writing.htm">Web Writing Styleguide</a></li>
        </ul>
        <!-- // navigation items -->
    </div>
    <!-- mobile menu(s) --></div>
    </nav><!--end of #nav-->
    </div><!--end of .mainNavCtnd-->
    </div><!--end of .mainNavCtnr-->
    <!-- // site navigation -->

JavaScript

(function($)
 {
     var $mainNavTog = $('.mainNavTogBtn a'),
         $mainNavCont = $('#mainNavTogCont');
     
     $mainNavTog.on('click', function(){
        
        var _aria = $mainNavCont.attr('aria-hidden');
        $mainNavCont.toggle().attr('aria-hidden', _aria !== "true");

        return false;
    });
    
     $('.srchTogBtn a').click(function(){
        $('#srchTogCont').toggle();
        
         return false;
    });

 })(jQuery);