By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,745 Members | 1,598 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,745 IT Pros & Developers. It's quick & easy.

When show a div hide others with navigation

P: 4
I have a topnavigation with some links and I have some hidden contentfields.
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
  1.     $(function() {
  2.             $('#activator-bureau').click(function(){
  3.                 $('#overlay-bureau').fadeIn('fast',function(){
  4.                     $('#box-bureau').animate({'bottom':'0px'},800);
  5.                 });
  6.             });
  7.             $('#boxclose-bureau').click(function(){
  8.                 $('#box-bureau').animate({'bottom':'-600px'},800,function(){
  9.                     $('#overlay-bureau').fadeOut('fast');
  10.                 });
  11.             });
  12.         });
Source

Expand|Select|Wrap|Line Numbers
  1. <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>
Jan 20 '13 #1
Share this Question
Share on Google+
3 Replies


100+
P: 185
You may add a specific class name (i.e. current) to the currently displayed box. For example, you would create a function named resetCurrent that selects the current box with the current css class and reset its position or fade it out, then fadeIn your new box.
Jan 21 '13 #2

P: 4
i'm a rookie, i can't script myself, just grabbin code from the web. managed to get the fiddle work a bit better.

http://jsfiddle.net/fourroses666/8y7Sr/83/

hope anyone can help.
Jan 21 '13 #3

P: 4
new fiddle, it almost works, first two links are ok, others notyet :(
http://jsfiddle.net/fourroses666/8y7Sr/100/
Jan 22 '13 #4

Post your reply

Sign in to post your reply or Sign up for a free account.