Accessible and dynamic animated information box

I have started with the example and added to the code to make it:

• Dynamic in height
• Accessible with JS turned off

Have I done this correct? Will this work on most browsers?

Working version visable here:

Original:

$('#example-links a').ho开发者_如何转开发ver(function(){
    var index = $("#example-links a").index(this);
    $('#example-content').animate({"marginTop" : -index*220 + "px"}); // multiply by height+top/bottom padding/margin/border
});

My modified code, it just seems a little long compared to the above:

var maxHeight = 0, container_maxHeight = 0;
var example_content = $("#example-content");
var example_div = example_content.children("div");

example_div.each(function() {   
    if($(this).height() > maxHeight) {
        maxHeight = $(this).height();
        container_maxHeight = $(this).outerHeight(true);
    }
});
example_div.height(maxHeight);

$("#example-content-container").css({
    "overflow":"hidden",
    "height": container_maxHeight+"px"
}); 

$('#example-links a').bind('click mouseover', function(e){
    var index = $("#example-links a").removeClass("active").index(this);
    $(this).addClass("active");
    example_content.stop().animate({"marginTop" : -index*container_maxHeight + "px"});
    e.preventDefault();
});

I bind both the click and mouseover because I want it to work via mouseover but then I also want it to work when browsing on a mobile phone that doesn't have a mouse to activate the hover.

Everything seems fine, the only thing I would add to make it more accessible if JS is off, are the section ids. You can check it here.

For each section, you add an id to the wrapping div, and then on your side links you link to that id.

I would clean up your code a little bit more:

(function($){
    $(document).ready(function(){   
        var maxHeight = 0, container_maxHeight = 0,
            example_content = $("#example-content"),
            example_div = example_content.children("div");

        example_div.each(function() {   
            var $section = $(this);
            if($section.height() > maxHeight) {
                maxHeight = $section.height();
                container_maxHeight = $section.outerHeight(true);
            }
        });
        example_div.height(maxHeight);

        $("#example-content-container").height(container_maxHeight);        

        var $tabs = $('#example-links a');
        $tabs.bind('click mouseover', function(e){
            var index = $tabs.removeClass("active").index(this);
            $(this).addClass("active");
            example_content.stop().animate({"marginTop" : -index*container_maxHeight + "px"});
            e.preventDefault();
        });                            
    });
})(jQuery);