multi-function tabs using jquery

Question

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"> 
    <h2>Tab 1 - Advanced Search:</h2>
    <form action="#" method="post">
         <label for="adv-search-1" class="screen-reader-text">Search:</label>
         <input type="text" name="adv-search-1" id="adv-search-1" value="" placeholder="e.g. search"/>
            <button class="adv-search-submit" class="button" type="submit">Submit</button>
        </form>
    </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"> 
    <h2>Tab 2 - Advanced Search:</h2>
    <form action="#" method="post">
         <label for="adv-search-2" class="screen-reader-text">Search:</label>
         <input type="text" name="adv-search-2" id="adv-search-2" value="" placeholder="e.g. search"/>
            <button class="adv-search-submit" class="button" type="submit">Submit</button>
        </form>
    </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"> 
    <h2>Tab 3 - Advanced Search:</h2>
    <form action="#" method="post">
         <label for="adv-search-3" class="screen-reader-text">Search:</label>
         <input type="text" name="adv-search-3" id="adv-search-3" value="" placeholder="e.g. search"/>
            <button class="adv-search-submit" class="button" type="submit">Submit</button>
        </form>
    </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').hide();
  $(t).fadeIn('slow');
  return false;
});

All this does currently is tabs the content relevant to the tab clicked.

I need this to firstly only show the 'quick search' every time each tab is clicked. Then if the user clicks the advanced search span the quick search div is toggled with the advanced search div.

Would this be possible?

View my current jsFiddle

Answer 1

Just playing with your fiddle a little bit, I made these changes

$('.tab_container:not(:first)').hide();
$('.adv-search').hide();
$('ul.tabs li a').click(function(){
  var t = $(this).attr('href');
  $('.tab_container').hide();
  $(t).fadeIn('slow');
  return false;
});

$('.advanced-search').click(function(){
  var curTab = $('.tab_container:visible');
  curTab.find('.quick-search').hide()
  curTab.find('.adv-search').show();
});

Answer 2

You can just toggle the each one inside the current visible div

$('ul.tabs li a').click(function () {
  var t = $(this).attr('href');
  $('.tab_container').hide();
  $(t).fadeIn('slow');
  updateWord();
  return false;
});
// on advanced-search div click
$('.advanced-search').click(function () {
  // toggle both divs inside the visible div
  $('div.tab_container:visible').find('.quick-search,.adv-search').toggle();
  updateWord();
});
// function to update wording on div
function updateWord() {
  var c = $('div.tab_container:visible').find('div:visible').attr('class');
  $('.advanced-search').text(function (i, v) {
    return c.split('-')[0] == 'quick' ? v.replace('Quick', 'Advanced') : v.replace('Advanced', 'Quick')
  });
}

FIDDLE