Javascript Show/Hide Sidebar

[metaphysics]

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?

[acoder]

They're using a list (ul) for the contents and showing/hiding them by setting the style.display property to "block" and "none" respectively.

[metaphysics]

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?

[acoder]

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:

function showhide(id) {
 var elem = document.getElementById(id);
 if (elem.style.display=="none") elem.style.display = "block";
 else elem.style.display = "none";
}

[metaphysics]

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:

function showhide(id) {
 var elem = document.getElementById(id);
 if (elem.style.display=="none") elem.style.display = "block";
 else elem.style.display = "none";
}

Thanks a bunch, I'll try it out.