HTML:
<ul class="tabs">
<li><a href="#tab-one" class="current">Residential</a></li>
<li><a href="#tab-two">Commercial</a></li>
<li><a href="#tab-three">Agricultural</a></li>
</ul>
<div id="tab-one" class="tab_container">
<div class="quick-search">
<h2>Tab 1 - Quick Search:</h2>
<form action="#" method="post">
<label for="quick-search-1" class="screen-reader-text">Quick Search:</label>
<input type="text" name="quick-search-1" id="quick-search-1" value="" placeholder="e.g. search"/>
<button class="quick-search-submit" class="button" type="submit">Submit</button>
</form>
</div>
<div class="adv-search"></div>
</div>
<div id="tab-two" class="tab_container">
<div class="quick-search">
<h2>Tab 2 - Quick Search:</h2>
<form action="#" method="post">
<label for="quick-search-2" class="screen-reader-text">Quick Search:</label>
<input type="text" name="quick-search-2" id="quick-search-2" value="" placeholder="e.g. search"/>
<button class="quick-search-submit" class="button" type="submit">Submit</button>
</form>
</div>
<div class="adv-search"></div>
</div>
<div id="tab-three" class="tab_container">
<div class="quick-search">
<h2>Tab 3 - Quick Search:</h2>
<form action="#" method="post">
<label for="quick-search-3" class="screen-reader-text">Quick Search:</label>
<input type="text" name="quick-search-3" id="quick-search-3" value="" placeholder="e.g. search"/>
<button class="quick-search-submit" class="button" type="submit">Submit</button>
</form>
</div>
<div class="adv-search"></div>
</div>
<div class="advanced-search">
<span>Advanced Search</span>
</div>
jQuery:
$('.tab_container:not(:first)').hide();
$('ul.tabs li a').click(function(){
var t = $(this).attr('href');
$('.tab_container .quick-search').show();
$('.tab_container .adv-search').hide();
$(t + ' .quick-search').show();
return false;
});
$('.advanced-search').click(function(){
$(this).prev('.quick-search').toggle();
$(this).next('.adv-search').toggle();
});
The updated code will now only display the "quick search" section when each tab is clicked. Additionally, if the user clicks on the "Advanced Search" span, the quick search section will toggle with the advanced search section.
Check out the updated jsFiddle demo here