JQuery tabs dynamic content with on click fadeout+fadein and slide without UI

Question

I am absolutely beginner in JQuery (but I've some knowledge about JS and programming on other languages)
I have 2 aims:

very simple tabs (or anything for controls), on click with old (active) tab content fading out and then clicked tab content fading in (same place)
same as 1 but with horizontal content slide instead of fading. I don't want JQuery UI, because that is overkill for a simple thing of this kind and I want to learn.

Aim 1, JS:

$(function () {
$("div.tabs > div:gt(0)").hide();
$("div.tabs ul a:first").addClass('selected');

$('div.tabs ul a').click(function () {
$("div.tabs > div").fadeOut('normal', function () {
$("div.tabs > div").fadeIn('slow');
});
$('div.tabs ul a').removeClass('selected');
$(this).addClass('selected');
   return false;
});
});

HTML:

<div class="tabs">
    <ul>
        <li><a href="#first">First</a></li>
        <li><a href="#second">Second</a></li>
        <li><a href="#third">Third</a></li>
    </ul>
    <div id="first">
        <h2>First content</h2>
    </div>
    <div id="second">
        <h2>Second content</h2>
    </div>
    <div id="third">
        <h2>Third content</h2>
    </div>
</div>

How to find active div, instead of poking all divs with $("div.tabs > div") in fadeOut and in fadeIn lines?

Aim2:
I read about slideUp and slideDown but that is vertical, perhaps I've to use animate()?
How? If it's too complicated than it is good for me with vertical slide...

Paul · Accepted Answer · 2012-05-29T13:33:07.387

1

Aim 1: Just add an active class to the current content div. See demo for altered code.

Aim 2: There are several techniques to do it w/o jQuery UI, depends on what you want to achieve and where you want to use it. See the altered demo for some sliding effects.

edited May 29 '12 at 13:33

answered May 29 '12 at 13:03

Paul

8,974
3
28
48

in your solution you gave me the idea of `$(this).attr('href')` and I implemented it simplified into a [test file](http://jsfiddle.net/kczjf/4/) but strange things happens... – May 29 '12 at 13:54
I [updated my simplified code](http://jsfiddle.net/kczjf/5/) and it works, so no need for adding `active` classes for aim1, but thanks for the `.attr('href')` and your solution for aim2 is the best looking I've ever imagined :-) Thanks. – May 29 '12 at 14:13
is there a way for your aim2 solution without fixed height, eg. for undefined length of texts? – May 29 '12 at 14:17
The height is only needed, because the content divs reside within div.tabs. With a few HTML and CSS changes this will also work for dynamic lengths. – Paul May 29 '12 at 17:27

score 0 · Answer 2 · 2012-05-29T14:27:52.733

Paul's answer simplified for aim1: without additional classes, optimized to "div" + $(this).attr('href') and solution for fadeout is div:visible:

$(function () {
 $("div.tabs > div:gt(0)").hide();
 $("div.tabs ul a:first").addClass('selected');

 $('div.tabs ul a').click(function () {
  var newDiv = "div" + $(this).attr('href');
  $("div.tabs > div:visible").fadeOut('normal', function () {
   $(newDiv).fadeIn('slow');
  });
  $('div.tabs ul a').removeClass('selected');
  $(this).addClass('selected');
  return false;
 });
});

Thanks Paul.

JQuery tabs dynamic content with on click fadeout+fadein and slide without UI

2 Answers2