JSFiddle - React, Tailwind, and code Playground

by john_s

HTML

<div class = "search-form">
There is some code for the basic search here.
<div class = "more"><b>More Options</b> </div>
</div>

<div class = "view-filters less"><b>Less Options</b> 
<div>
    There is some code for the advanced search here.<br />
    There is some code for the advanced search here.<br />
    There is some code for the advanced search here.<br />
    There is some code for the advanced search here.<br />
    There is some code for the advanced search here.<br />
</div>
</div>

CSS

.search-form
{

overflow: hidden;
}
.view-filters
{
position:relative;
display:block;
}
.pager
{
display:none;
}
table
{
display:none;
}

JavaScript

jQuery.noConflict();
jQuery(document).ready(function($) {
$(".view-filters").hide();
$(".more").click(function() {

$(".search-form").slideUp("slow");
$(".view-filters").slideDown("slow");
});
$(".less").click(function() {
$(".view-filters").slideUp("slow");
$(".search-form").slideDown("slow");
});
});