[thelist] Show Hide With Java Script Not Reducing Space

Matt Warden mwarden at gmail.com
Sat Jan 29 12:20:18 CST 2005


Hi Dave,


On Sun, 30 Jan 2005 02:22:59 +0900, Dave <dave at tokyocomedy.com> wrote:
> List,
> 
>     The Situation:
>     What I would like to do is make a set of DIVs, each with a
> descriptive heading above them. When the heading is clicked on, the div
> becomes shown. When clicked again, the DIV is invisible, and the
> headings collapse down to save space.
...
>     The Problem:
...
>     The problem is that when the DIVs are invisible, there is still the
> same amount of space between headers.

That's is caused not by anything in your JS. It is the CSS property
you are altering here:

> maxwell_smart.style.visibility = state;

(And other similar lines.)

I just so happen to have some code that I wrote (with the help of
thelist) that does just this. I needed it slightly more complicated,
but it should still work fine for you. You are free to use it:

http://mwarden.f2o.org/sandbox/collapsible_elements.htm

Note that I am altering the display property, not the visibility
property (not directly, of course, but via a .className (CSS class
name) switch).

Ask away if you have any questions.

hth,

-- 
Matt Warden
Miami University
Oxford, OH, USA
http://mattwarden.com


This email proudly and graciously contributes to entropy.


More information about the thelist mailing list