JSFiddle - React, Tailwind, and code Playground
HTML
<div id="profile-selector" class="selector">
<select>
<option>Select a profile</option>
<option>Profile 1</option>
<option>Profile 2</option>
</select>
</div>
<div id="group-selector" class="selector hide">
<select>
<option>Select a group</option>
<option>Group 1</option>
<option>Group 2</option>
</select>
</div>
<button href="#" data-alt="Switch to profile selector">Switch to group selector</button>
CSS
.hide{
display: none;
}
JavaScript
$( function(){
$( "a" ).on( "click", function(){
var alt = $( this ).data( 'alt' );
$( this )
.data( 'alt', $( this ).text() )
.text( alt );
$( ".selector" ).toggleClass( 'hide' );
return false;
} );
} );