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

show/hide thingy

P: n/a
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.

Sep 6 '05 #1
Share this Question
Share on Google+
3 Replies


P: n/a
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
----------------------------------------------------------------------


Sep 6 '05 #2

P: n/a
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
Sep 6 '05 #3

P: n/a
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.

Sep 7 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.