Result
http://jsfiddle.net/kachibito/7n8sx/40/embedded/result,js,css,html
jQuery
var p = $("article"), t = $("#tabs li a"); p.hide(); t.click(function(e) { e.preventDefault(); p.hide(); ph = $(this.hash).outerHeight(); $(this.hash).show().parent().animate({ "height": ph }); t.removeClass("selected"); $(this).addClass("selected"); }).filter(':first').click();
html
<ul id="tabs"> <li><a href="#panel1">Panel 1</a></li> <li><a href="#panel2">Panel 2</a></li> <li><a href="#panel3">Panel 3</a></li> </ul> <section id="panelwrap"> <article id="panel1"> <h1>This is panel 1</h1> <p>panel 1 panel 1 panel 1 panel 1 panel 1 </p> </article> <article id="panel2"> <h1>This is panel 2</h1> <p>panel 2 </p> </article> <article id="panel3"> <h1>This is panel 3</h1> <p>panel 3 panel 3 panel 3 panel 3 panel 3 </p> </article> </section>