Javascript code snippet not working in drupal

Question

I'am using the javascript code below to get vertical tabs displayed. In the first line I loaded the jquery library from https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js . Then follows the code below. So far so good but I was told by the admin to remove the first line from the content as the library is going to be loaded by drupal autmatically. Right now the 1.5.2 version is embeded into drupal, I removed the line where I was loading the library externally but my vertical tabs hover effect won't work any more. Any idea why this happened?

$(document).ready(function() {

    $(".tabsnew .tab[id^=tab_menu]").hover(function() {
        var curMenu=$(this);
        $(".tabsnew .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");
    });
});

Answer 1

In Drupal 7 you can't use the $ function anymore (well, not out-of-the-box). The reason is that Drupal allows you to run more than one js library at once and $ is eg also used in prototype.

Instead, replace $(document) with jQuery(document) and so on.