When I click on a link it animates the selected contentfield from bottom:-600 to bottom:0.
When I click on a other link, an other contentfield shows, **but I need it to hide the other..**
This is my site http://tiny.cc/3zppqw where the contentfields do pop up correct, but don't hide after clicking a other link.
Sorry, I'm a rookie/noob.
Is there anyone who can help me out?
I tried to make a fiddle: http://jsfiddle.net/fourroses666/8y7Sr/75/
Script:
Expand|Select|Wrap|Line Numbers
- $(function() {
- $('#activator-bureau').click(function(){
- $('#overlay-bureau').fadeIn('fast',function(){
- $('#box-bureau').animate({'bottom':'0px'},800);
- });
- });
- $('#boxclose-bureau').click(function(){
- $('#box-bureau').animate({'bottom':'-600px'},800,function(){
- $('#overlay-bureau').fadeOut('fast');
- });
- });
- });
Expand|Select|Wrap|Line Numbers
- <div class="reference"> <a id="activator-werkwijze" class="activator">werkwijze</a> <a id="activator-bureau" class="activator">bureau</a> </div> <div class="box" id="box-bureau"> <a class="boxclose" id="boxclose-bureau">x</a> <div class="slidewrap">Some info...</div> </div> <div class="box" id="box-werkwijze" style="bottom:-300px;"> <a class="boxclose" id="boxclose-werkwijze">x</a> <div class="slidewrap">Some info 2...</div> </div>