JSFiddle - React, Tailwind, and code Playground

HTML

<section class="round-border">
			<h2>jQuery toggle() to hide/show collapse content</h2>
			<div>
				<button href="#collapse1" class="nav-toggle">Show</button>
			</div>
			<div id="collapse1" style="display:none">
				<p>Bla bla bla bla</p>
			</div>
		</section>

CSS

.round-border {
			border: 1px solid #eee;
			border: 1px solid rgba(0, 0, 0, 0.05);
			-webkit-border-radius: 4px;
			-moz-border-radius: 4px;
			border-radius: 4px;
			padding: 10px;
			margin-bottom: 5px;
		}

JavaScript

$(document).ready(function() {
		  $('.nav-toggle').click(function(){
			//get collapse content selector
			var collapse_content_selector = $(this).attr('href');					
 
			//make the collapse content to be shown or hide
			var toggle_switch = $(this);
			$(collapse_content_selector).toggle(function(){
			  if($(this).css('display')=='none'){
                                //change the button label to be 'Show'
				toggle_switch.html('Show');
			  }else{
                                //change the button label to be 'Hide'
				toggle_switch.html('Hide');
			  }
			});
		  });
 
		});