Help with optimizing some functioning jQuery

I have some simple jQuery that adds some tab functionality. This is based on something I found somewhere (can't recall where), but it's probably mostly original at this point. I was having trouble with some selectors, so I had to do some stuff that seemed awkward (see the .children().children part). The awkward parts stem from adding the ability to handle multiple sets of tabs on a single page.

Am I possibly using the selector wrong? And can you see any other room for improvement here?

Here's the jQuery:

// Create and manage tab blocks
$('.tab-sections section').hide(); // Hide all tabs
$('.tab-list').each(function(){ // Make the first tab active
    $('.tab-list li:first-child').addClass('active');
});
$('.tab-sections').each(function(){ // Make the first tab's content visible
    $('.tab-sections section:first-child').show();
});
$('.tab-list li').click(function() {
    $(this).siblings().removeClass('active'); // Remove any "active" class
    $(this).addClass('active'); // Add "active" class to selected tab
    // Hide tabs. This looks awkward, but .children('.tab-sections section') wouldn't work
    $(this).parents('.tab-block').children('.tab-sections').children('section').hide();
    // Find the href attribute value to identify the active tab + content
    var activeTab = $(this).find('a').attr('href');
    $(activeTab).fadeIn('fast'); // Fade in the active ID content
    return false;
});

Here's the HTML:

<div class="tab-block grad-tabs">
 <ul class="tab-list">
     <li><a href="#tab1" title="tab 1">Tab 1</a></li>
     <li><a href="#tab2" title="tab 2">Tab 2</a></li>
     <li><a href="tab3" title="tab 3">Tab 3</a></li>
 </ul>
 <div class="tab-sections">
     <section id="tab1">
      <h2>Tab 1</h2>
      <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
     </section>
     <section id="tab2">
      <h2>Tab 2开发者_JAVA百科</h2>
      <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
     </section>
     <section id="tab3">
      <h2>Tab 3</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
     </section>
 </div>
</div>

---

You can make a few more improvements, for your main question, you can use .find() to solve the .children() problem, instead of this:

$(this).parents('.tab-block').children('.tab-sections').children('section').hide();

Go up to the .tab-block using .closest() then .find() what you want inside, like this:

$(this).closest('.tab-block').find('.tab-sections section').hide();

For the rest, yes there are more optimizations, there's no need for the initial .each() loops since they all do the same thing repeatedly and you can further optimize your initial hiding and chaining inside the .click() handler, like this:

$('.tab-sections section:not(:first-child)').hide(); // Hide all content that not the first
$('.tab-list li:first-child').addClass('active');
$('.tab-list li').click(function() {
   $(this).addClass('active').siblings().removeClass('active'); // Add "active" class to selected tab, remove any other "active" class
   $(this).closest('.tab-block').find('.tab-sections section').hide(); // Hide tabs.
   var activeTab = $(this).find('a').attr('href'); // Find the href attribute value to identify the active tab + content
   $(activeTab).fadeIn('fast');                    // Fade in the active ID content
   return false;
});

If you're on jQuery 1.4.1+ you can even further optimize this with .delegate(), changing this:

$('.tab-list li').click(function() {

To this:

$('.tab-list').delegate('li', 'click', function() {

This attaches one click handler per .tab-list element, rather than one per <li>.

---

You may interested in this

var sections = $('.tab-sections section');

sections.hide();

$('.tab-list li:first-child').addClass('active');

$('.tab-sections section:first-child').show();

$('.tab-list').delegate("li", "click", function() {

    $(this).addClass('active').siblings().removeClass('active');

    sections.hide(); 

    var activeTab = $(this).children('a').attr('href'); 
    $(activeTab).fadeIn('fast');

});

Here I've cached the sections since it is used multiple times during the page actions.

Again the jquery delegate method is used instead of adding 1 click event to each of the 3 li elements.

You can find a working sample here, but I think you can have a look at this also.