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

Javascript Show/Hide Sidebar

P: 59
I was browsing the Mozilla Developer Center when I came across their drop down sidebar. (live preview: http://developer.mozilla.org/en/docs..._Documentation)

I would like to use something similar if not exact to this; can anyone help me?
Oct 17 '07 #1
Share this Question
Share on Google+
4 Replies


acoder
Expert Mod 15k+
P: 16,027
They're using a list (ul) for the contents and showing/hiding them by setting the style.display property to "block" and "none" respectively.
Oct 18 '07 #2

P: 59
They're using a list (ul) for the contents and showing/hiding them by setting the style.display property to "block" and "none" respectively.
I don't know anything about javascript... the part I was interested in was that when you hid the sidebar, the content shifted over. The rolldown effect was cool, but I'm mainly interested in how to do the content shift. Can you be more specific?
Oct 18 '07 #3

acoder
Expert Mod 15k+
P: 16,027
I don't know anything about javascript... the part I was interested in was that when you hid the sidebar, the content shifted over. The rolldown effect was cool, but I'm mainly interested in how to do the content shift. Can you be more specific?
When you set style.display to "block" which is the default state, the contents show. When you set it to "none", the contents are removed. So all you have to do is toggle between "block" and "none".

For example:
[HTML]<a href="#" onclick="showhide('test'); return false;">Hide</a>
<span id="test" style="display:block">Test</span>[/HTML] and the showhide function:
Expand|Select|Wrap|Line Numbers
  1. function showhide(id) {
  2.  var elem = document.getElementById(id);
  3.  if (elem.style.display=="none") elem.style.display = "block";
  4.  else elem.style.display = "none";
  5. }
Oct 18 '07 #4

P: 59
When you set style.display to "block" which is the default state, the contents show. When you set it to "none", the contents are removed. So all you have to do is toggle between "block" and "none".

For example:
[HTML]<a href="#" onclick="showhide('test'); return false;">Hide</a>
<span id="test" style="display:block">Test</span>[/HTML] and the showhide function:
Expand|Select|Wrap|Line Numbers
  1. function showhide(id) {
  2.  var elem = document.getElementById(id);
  3.  if (elem.style.display=="none") elem.style.display = "block";
  4.  else elem.style.display = "none";
  5. }
Thanks a bunch, I'll try it out.
Oct 18 '07 #5

Post your reply

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