show/hide thingy

[alex]

I'd like to have a show/hide widget on my web site, kind of like "show
details" / "hide details" in Google Groups. Is there a tutorial
explaining how to make them? Google's is a bit complex and it's easy to
get something wrong. If the browser does not support the required
features, I want it to generate a completely static page with the
"details" shown automatically.

[Andrew Scott]

alex wrote:

I'd like to have a show/hide widget on my web site, kind of like "show
details" / "hide details" in Google Groups. Is there a tutorial
explaining how to make them? Google's is a bit complex and it's easy to
get something wrong. If the browser does not support the required
features, I want it to generate a completely static page with the
"details" shown automatically.

Hi Alex

It's very trivial to create this consider the following:
---------------------- JAVASCRIPT -----------------------
function Show(){
document.getElementById( "Details" ).style.display = "block";
document.getElementById( "ButtonShow" ).style.display = "none";

}
function Hide(){
document.getElementById( "Details" ).style.display = "none";
document.getElementById( "ButtonShow" ).style.display = "block";
}
---------------------------------------------------------

------------------------ HTML ---------------------------
<div id="ButtonShow" onclick="Show();">Show Details</div>
<div id="Details">
<div onclick="Hide();">Hide Details</div>
<p>This is the details...</p>
</div>
---------------------------------------------------------

------------------------ CSS ---------------------------
#Details { display:none; }
---------------------------------------------------------

I have expanded the code quite a bit to make it more simple.

To start, using CSS, I hide the the Details element, I have used display
and not the visibility property as visibility will not free the space
taken up by the element.

Then there are two functions Show and Hide. By Using the elements Id I
reference both the button and the details area and change the display
property of the style object.

As you can see I have included the hide button in the details element so
that it will appear and disappear along with the details. But it could
have been yet another element that you could have referenced.

This method will work an all modern browsers. IE/FireFox/Opera/Safari.
Hope this helps

Andy

----------------------------------------------------------------------
http://km0ti0n.blunted.co.uk/blog
http://km0ti0n.blunted.co.uk/mozXPath
http://km0ti0n.blunted.co.uk
----------------------------------------------------------------------

[Matt Kruse]

Andrew Scott wrote:

To start, using CSS, I hide the the Details element

This doesn't work well for browsers without javascript support.

If the details are initially hidden, then javascript should go through and
hide them on page load.

For example, this is a "sliding" div toggler that I wrote as an experiment a
while ago:
http://mattkruse.com/temp/togglediv.html

It should meet the OP's requirements, I think.

--
Matt Kruse
http://www.JavascriptToolbox.com
http://www.AjaxToolbox.com

[alex]

Matt Kruse wrote:

Andrew Scott wrote:

To start, using CSS, I hide the the Details element

This doesn't work well for browsers without javascript support.

If the details are initially hidden, then javascript should go through and
hide them on page load.

For example, this is a "sliding" div toggler that I wrote as an experiment a
while ago:
http://mattkruse.com/temp/togglediv.html

It should meet the OP's requirements, I think.

Thanks for sharing your code. There is a couple of problems with it,
IMHO:

* Clicking on a link to open a new tab / window will result in
frustation. A site visitor might think the link does not work. The link
itself might explicitly tell the user not to do that, but that's not
intuitive and distracting from the actual content

* Long lines get cut off (If you have a large paragraph instead of an
array of short lines separated by <BR>, only one line is shown with
most of the content hidden)

There was something else, but I forget right now.