Custom script of jQuery Tabs

Question

I have sticky problem with jquery tabs. Below link to my website:

http://www.rask.pl/test/majatruck/wynajem-krotkoterminowy.html

Structure of divs:

<div class="cnt">
    <div class="left">
        <ul class="list">
        <li><span class="title"><a class="tab_link tab_link_wybrany" rel="#rnt1" href="#">First</a></span></li>
        <li><span class="title"><a class="tab_link" rel="#rnt2" href="#">Second</a></span></li>
        <li><span class="title"><a class="tab_link" rel="#rnt3" href="#">Third</a></span></li>
        </ul>
    </div>
    <div class="super">
        <div id="rnt1" class="tab_text tab_wybrany">First</div>
        <div id="rnt2" class="tab_text">Second</div>
        <div id="rnt3" class="tab_text">Third</div>
    </div>
</div>

Tabs script:

$(document).ready(function(){
    $(".tab_wybrany").fadeIn();
    $(".tab_link").live("click", function(event){
        event.preventDefault();
        $(".tab_link_wybrany").removeClass("tab_link_wybrany");
        $(this).addClass("tab_link_wybrany");
        var container_id = $(this).attr("rel");
        $(".tab_wybrany").animate({
            opacity : "toggle",
        },function(){
            $(this).removeClass("tab_wybrany");
            $(container_id).addClass("tab_wybrany");
            $(".tab_wybrany").animate({
                opacity : "toggle",
            });
        });
    });
});

When I click on tab - divs disapear? Offline is everything OK... I don't know where is my mistake... Please help me! :)

Answer 1

May i suggest instead of using animate opacity that you use fadeIn and fadeOut. That may solve your problem.

So your script would look like this:

$(document).ready(function(){
    $(".tab_wybrany").fadeIn();
    $(".tab_link").live("click", function(event){
        event.preventDefault();
        $(".tab_link_wybrany").removeClass("tab_link_wybrany");
        $(this).addClass("tab_link_wybrany");
        var container_id = $(this).attr("rel");
        $(".tab_wybrany").fadeOut(750, function(){
            $(this).removeClass("tab_wybrany");
            $(container_id).addClass("tab_wybrany");
            $(".tab_wybrany").fadeIn(750);
        });
    });
});