<ul class="custom-nav"> <li><span class="show-item item-one current">Item One</span></li> <li><span class="show-item item-two">Item Two</span></li> </ul> <script type="text/javascript"> jQuery(document).ready(function(){ jQuery(".item-one").click(function(){ jQuery(".hidden-area").hide(); jQuery("#item_one.hidden-area").show(); jQuery(".show-item").removeClass("current"); jQuery(this).addClass("current"); var fixer = jQuery("#header").height(); jQuery('html,body').animate({scrollTop: jQuery("#item_one").offset().top-fixer}, 500); }); jQuery(".item-two").click(function(){ jQuery(".hidden-area").hide(); jQuery("#item_two.hidden-area").show(); jQuery(".show-item").removeClass("current"); jQuery(this).addClass("current"); var fixer = jQuery("#header").height(); jQuery('html,body').animate({scrollTop: jQuery("#item_two").offset().top-fixer}, 500); }); }); </script> <style> .hidden-area { display: none; } #item_one { display: block; } </style>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter