[code="JS"] $(document).ready(function() { $(".tabs-content").each(function(){ $("div:not(:first)", this).hide(); }); $('#tabs a').click(function() { $("#tabs>li.active").removeClass("active"); $(this).parent().addClass("active"); $(".tabs-content").each(function(){ $("div:not(.tabs-content)", this).hide(); }); $($(this).attr('href')).show(); return false; }); }); HTML: [code="HTML"] Tabs

Section 1

This is content in section 1.

Section 2

This is content in section 2.

CSS gebruikt voor de demo: [code="css"] /* tab styles */ ul#tabs { list-style: none; border-bottom: 3px solid #ff7100; width: 95%; padding: 5px 5px 0px 5px; overflow: hidden; } ul#tabs li.active { float: left; display: block; padding: 5px; background-color: #fc8527; margin: 0px 10px 0px 0px; border-top-left-radius: 5px; border-top-right-radius: 5px; border: 1px solid #ff7100; border-bottom: 0px; } ul#tabs li:hover { float: left; display: block; padding: 5px; background-color: #ff7100; margin: 0px 10px 0px 0px; border-top-left-radius: 5px; border-top-right-radius: 5px; border: 1px solid #fc8527; border-bottom: 0px; } ul#tabs li { float: left; display: block; padding: 6px 6px 0px 6px; margin: 0px 10px 0px 0px; }