ScrollTo and toggle div
- by user1466260
I'm a big fan ov 8020.com and my goal is to create a porfolio with the same functionality like the one they have. Here is my markup
This section should be hidden
<section id="work-container">
<div id="work-list-51" class="work-details">
<h1>
<div class="close-project">
</div>
<div id="work-list-52" class="work-details">
<h1>
<div class="close-project">
</div>
<div id="work-list-53" class="work-details">
<h1>
<div class="close-project">
</div>
</section>
This section will hold the thumbnails. When you click a thumbnail you will scroll to the top and the div will slidetoggle.
<ul id="work-list">
<li id="work-list-51"><a data-page="51" href="#work-list-51">
<img width="230" height="230" alt="Mariann Rosa" src="sites/default/files/styles/square_thumbnail/public/field/image/mariann.jpg">
</a></li>
<li id="work-list-52"><a data-page="52" href="#work-list-52">
<img width="230" height="230" alt="Mariann Rosa" src="sites/default/files/styles/square_thumbnail/public/field/image/mariann.jpg">
</a></li>
<li id="work-list-53"><a data-page="53" href="#work-list-53">
<img width="230" height="230" alt="Mariann Rosa" src="sites/default/files/styles/square_thumbnail/public/field/image/mariann.jpg">
</a></li>
</ul>
I have come this far:
$(document).ready(function(){
$("#work-list a").click(function(event){
event.preventDefault();
$('html, body').animate (
{scrollTop: $('#top').offset().top}, 800
);
});
$('#work-list a').click(function(e) {
$('#work-container > div').hide();
$(this.hash).slideToggle(1600);
});
});
It scrolls to top and the div becomes visible but it does not work correctly :)
