jQuery tab controls placed on bottom don't work
<p>I am using this solution to have <a href="http://stackoverflow.com/questions/3689660/jquery-conflict-with-identical-scripts/3689751#3689751">multiple tabs in one page</a>.</p>

<pre><code>$(".tab_content").not(':first-child').hide();
var tabs = $('.tabs li');

tabs.filter(':first-child').addClass('active');

tabs.click(function() {
    var current = $(this);

    if(!current.hasClass('active')){
        current.addClass('active').siblings().removeClass('active');
        var activeTab = current.find("a").attr("href");
        current.parent().next().children().hide().filter(activeTab).fadeIn();
    }

    return false;
});
</code></pre>

<p>I need to place the tabs controls after the tab content.
But it won't work. If tabs controls placed before the tabs content, it works fine.
Can you help me?</p>

<p>Here is my <a href="http://jsfiddle.net/pivi/pnm98/" rel="nofollow">jsfiddle</a>: </p>
