JSFiddle - React, Tailwind, and code Playground

by wirey00

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...

CSS

ul.tabs, .tab_container {
  margin-bottom:40px;
}
ul.tabs li, .advanced-search {
  cursor:pointer;
}
ul.tabs li {
  display:inline-block;
}

JavaScript

$('.adv-search').hide();

$('.tab_container:not(:first)').hide();

$('ul.tabs li a').click(function () {
  var t = $(this).attr('href');
  $('.tab_container').hide();
  $(t).fadeIn('slow');
  updateWord();
  return false;
});

$('.advanced-search').click(function () {
  var ctx = $('div.tab_container:visible');
  var d = $('.quick-search,.adv-search',ctx);
  var h = d.filter(':visible');
  var s = d.filter(':hidden');
  h.slideUp(500,function(){
    s.slideDown(500);
  });
  updateWord();
});

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')
  });
}