JSFiddle - React, Tailwind, and code Playground
HTML
<div id="s2id_author-search"></div>
<div id="searchSwitch_btn">button</div>
CSS
#s2id_author-search {
width:100px;
height:100px;
background: red;
}
JavaScript
$( "#s2id_author-search" ).hide();
$( "#searchSwitch_btn" ).click(function(){
if($("#s2id_author-search").css('display') === 'none'){
console.log("Showing author search: 1");
$("#s2id_author-search").show();
console.log("Hiding title search: 2");
$("#s2id_title-search").hide();
}
else {
$("#s2id_author-search").hide();
console.log("Hiding author search: 3");
$("#s2id_title-search").show();
console.log("Showing title search: 4");
}
});