我想制作一个可展开的页脚,在点击“+”号时展开。
一开始,我的页脚只有版权信息和社交媒体链接。当点击符号时,我希望站点地图(和其他一些内容)滑动到版权信息上方。
然而,我需要确保页面完全向下滚动。如果没有滚动,面板将会滑动,但您将无法看到它。
这是我现在拥有的:
HTML
JQUERY
然而,我需要确保页面完全向下滚动。如果没有滚动,面板将会滑动,但您将无法看到它。
这是我现在拥有的:
HTML
<div id="footer-wrapper" class="clearfix">
<footer>
<span id="footer-expander">+</span>
<section id="footer-hidden" class="clearfix">
<section id="sitemap" class="cols-3">
<h1>Sitemap</h1>
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Portfolio</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Contact</a></li>
</ul>
</section>
<section class="cols-3">
<h1>Something else</h1>
</section>
<section class="cols-3">
<h1>Last, but not least.</h1>
</section>
</section>
<section id="footer-show" class="clearfix">
<p>© Helena Standaert.</p>
<section id="btm-socialmedia" class="socialmedia">
<ul>
<li class="twitter"><a href="">Twitter</a></li>
<li class="facebook"><a href="">Facebook</a></li>
<li class="linkedin"><a href="">LinkedIn</a></li>
<li class="rss"><a href="">RSS-feed</a></li>
</ul>
</section>
</section>
</footer>
</div>
JQUERY
$('#footer-expander').click(function(){
$('#footer-hidden').slideToggle('slow', function(){
goToByScroll('footer-wrapper')
if($('#footer-expander').html('-')){
$('#footer-expander').html('+');
}
if($('#footer-expander').html('+')){
$('#footer-expander').html('-');
}
});
})