jQuery Hide and Show
Sat Oct 15 2022 17:17:15 GMT+0000 (Coordinated Universal Time)
Saved by
@omnixima
#jquery
<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>
content_copyCOPY
Comments