I have an accordion that is almost right.
HTML CODE:
<footer>
<div>
<h1>Hide</h1>
<h1>Hide</h1>
<h1>Hide</h1>
<h1>Hide</h1>
<h1>Hide</h1>
<h1>Hide</h1>
<div>
</footer>
<h3><a href="" title="Open footer">Show</a></h3>
I do want that <h3><a href="" title="Open footer">Show</a></h3>
stay always on the top and changes name to Hide when is active so, SHOW/HIDE.
I can not see away around. It is at: http://jsfiddle.net/FeGea/1
Try this: http://jsfiddle.net/UHztx/
$('footer').prev('h3').find('a').toggle(function() {
var sb = $(this).parent().next('footer').slideDown(3200);
$('html, body').animate({ scrollTop: '+=' + sb.data('expanded-height') }, 3000);
$(this).text('Hide');
return false;
}, function() {
var sb = $(this).parent().next('footer').slideUp(3200);
$(this).text('Show');
return false;
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.