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

wirey00 · Accepted Answer · 2013-01-07 21:32:30Z

1

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

answered Jan 7, 2013 at 21:32

wirey00

33.7k7 gold badges56 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Rob Over a year ago

Thank you very much :) How did you get into jQuery and what would you suggest me doing to get better at it, learning resources etc?

wirey00 Over a year ago

Read through the items here and it should help you get on your way :) stackoverflow.com/tags/jquery/info

Rob Over a year ago

Also instead of just toggling the divs, maybe have a nice hide/show slide effect?

Rob Over a year ago

Thanks, maybe I could use you as a tutor ;)

Rob Over a year ago

is it possible to use the slideDown() for both animation? So every toggle of the div slides down over each other?

|

Charles · Accepted Answer · 2013-01-07 21:45:00Z

0

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

answered Jan 7, 2013 at 21:45

Charles

3091 silver badge16 bronze badges

3 Comments

Rob Over a year ago

Good but it doesn't toggle the advanced/quick divs and dosn't change the advanced search span to quick search like the above fiddle does. Nice effort though :)

Charles Over a year ago

Cool. I had a hard time understanding your request. Glad you got it working.

Rob Over a year ago

Yeah, sometimes I find it hard going explaining what exactly is in my head! Cudos for trying to help though

Collectives™ on Stack Overflow

multi-function tabs using jquery

2 Answers 2

6 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related