Question

I have been trying to find the answer to my problem on Google for days now without any luck so I was hoping somebody here could help.

The code can be found at this link http://www.scriptbreaker.com/javascript/script/JQuery-vertical-tab-menu, it is just a vertical tab menu and I have already made it change on click not hover.

What I want is the content to slide up and the new content slide down (depending on which tab was clicked as to whether it goes up or down if that makes sense) when it is clicked.

This is the jQuery for it:

<script language="JavaScript">
        $(document).ready(function() {
            $(".tabs .tab[id^=tab_menu]").click(function() {
                var curMenu=$(this);
                $(".tabs .tab[id^=tab_menu]").removeClass("selected")
                curMenu.addClass("selected")

                var index=curMenu.attr("id").split("tab_menu_")[1];
                $(".curvedContainer .tabcontent").css("display","none")
                $(".curvedContainer #tab_content_"+index).css("display","block")
            });
        });
    </script>

Update
Here is the fiddle http://jsfiddle.net/swift29/4pVtB/

Thanks in advance, Swift.

Answer 1

May be this FIDDLE will suffice you. You need simply call a .slideup/slideDown methods instead of simply using display:block/none

$(document).ready(function() {
$(".tabs .tab[id^=tab_menu]").click(function() {
    var curMenu=$(this);
    $(".tabs .tab[id^=tab_menu]").removeClass("selected");
    curMenu.addClass("selected");

    var index=curMenu.attr("id").split("tab_menu_")[1];
    $(".curvedContainer .tabcontent").slideUp('fast');
    $(".curvedContainer #tab_content_"+index).slideDown('fast');
});
});​