JSFiddle - React, Tailwind, and code Playground

HTML

<div data-role="page" id="page">
    <div data-role="header" id="head">

      <div data-role="navbar" id="home" style="display:block;">
        <ul>
          <li><a>Home</a></li>
          <li><a>Videos</a></li>            
          <li><a>Music</a></li>                        
        </ul>
      </div>

      <div data-role="navbar" id="videos" style="display:none;">
        <ul>
          <li><a data-theme="e">Home</a></li>
          <li><a data-theme="e">YouTube</a></li>            
          <li><a data-theme="e">Viemo</a></li>                        
        </ul>
      </div>        

      <div data-role="navbar" id="music" style="display:none;">
        <ul>
          <li><a data-theme="b">Home</a></li>
          <li><a data-theme="b">Pandora</a></li>            
          <li><a data-theme="b">Grooveshark</a></li>                        
        </ul>
      </div>          

   </div>
    <div data-role="content">
      <a data-role="button" id="toggleVideos">Video NAV Bar</a>
      <a data-role="button" id="toggleMusic">Music NAV Bar</a>     
      <a data-role="button" id="toggleHome">Home NAV Bar</a>          

      <br />

        <a data-role="button" id="toggleHomeVideos">Toggle Home/Videos NAV Bars</a>          
        <a data-role="button" id="toggleHomeMusic">Toggle Home/Music NAV Bars</a>          
        <a data-role="button" id="toggleVideosMusic">Toggle Videos/Music NAV Bars</a>          
      </div>
  </div>

JavaScript

$(document).ready(function() {
   
    // The first set of THREE buttons perform toggling of NAV bar state via discreet buttons.
    $('#toggleVideos').bind('click', function() {

        // Show only desired NAV Bar
        $('#home').hide();
        $('#videos').show();
        $('#music').hide();

        // Refresh the NAV Bars       
        $('#page').trigger('create');

    });

    $('#toggleMusic').bind('click', function() {

        // As above, hide and show are changed to reflect only #music should be shown.
        $('#home').hide();
        $('#videos').hide();
        $('#music').show();

        $('#page').trigger('create');

    });

    $('#toggleHome').bind('click', function() {

        $('#home').show();
        $('#videos').hide();
        $('#music').hide();

        $('#page').trigger('create');

    });


    
    // The next set of THREE buttons peform toggle to-and-from different nav bars with single button.   
    $('#toggleHomeVideos').bind('click', function() {

        // Check to make sure 'if' we are on the #home nav bar before the toggle, otherwise click to #toggleHome in 'else' is done to set nav to #home.
        if( $('#home').css('display') == 'block' ){
        
            // Toggle only desired NAV Bar and hide all others.
            $('#home').toggle();
            $('#videos').toggle();
            $('#music').hide();
       
        } else { $('#toggleHome').click(); }
        
        // Refresh the NAV Bars
        $('#page').trigger('create');

    });
    

    $('#toggleHomeMusic').bind('click', function() {

        if( $('#home').css('display') == 'block' ){      

            // As above, toggle and hide are changed to reflect only #home and #music should toggle.
            $('#home').toggle();
            $('#videos').hide();
            $('#music').toggle();

        } else { $('#toggleHome').click(); }
           
        $('#page').trigger('create');

    });    


    $('#toggleVideosMusic').bind('click',...