show/hide content via <DIV> & Javascript...

Forum Moderators: open

Message Too Old, No Replies

show/hide content via <DIV> & Javascript...

irock

7:38 am on Jun 10, 2003 (gmt 0)

Hi, I heard people can combine <DIV> and javascript to show and hide HTML content with a mouse click. My HTML content involved also includes images and hyperlinks... I was wondering if there are brief examples that can point me in the right direction.

Thanks!

outrun

9:03 am on Jun 10, 2003 (gmt 0)

This will get you started

in between your <head> tags put this java script in

As you can see it gets the div ID for each of the browsers and hides it or shows it. I named the Div Id hideShow to make it easy for you.

Then in your document put in your Div element the id name hideShow you can change this of course

<div id="hideShow" ..etc>
My content
</div>

and this to call the javascript to hide it

and this to show it

That simple

regards,
Mark
<edit> syntax error </edit>

irock

10:37 am on Jun 10, 2003 (gmt 0)

Hi outrun,

Thanks for the codes! However, when I tried to add more layers <div>, it doesn't work. The 'showdiv' and 'hidediv' shows and hides all the layers respectively.

Actually, my goal is to have several text links that can display/overwrite the layer in the same location.

Visual example...

256MB Ś 512MB Ś 1GB
-----------------------
[PIC] [PRICE] <-- want this part to change to their respective layers when clicked on '256MB' '512MB' & '1GB' links.
-----------------------

Any ideas on how to do this? Any help would be much appreciated.

waldemar

10:46 am on Jun 10, 2003 (gmt 0)

A friend of mine is using this JS code in the header:

<script language="javascript">

</script>

and this html code for each division that is to be hidden/shown:

<p><a href="#" onclick="showhide('div1');">Show/hide me</a></p>
<div id="div1" style="display: none;">This is the content</div>

(use different IDs for different DIVisions)

The difference between using the css tags 'visibility' and 'block' is that with 'block' the layout will be updated as well.

irock

12:54 pm on Jun 10, 2003 (gmt 0)

waldemar,

Thanks for the codes... but it doesn't quite work on NS6...

outrun

12:59 pm on Jun 10, 2003 (gmt 0)

If I knew thats what you wanted to do it for I would have advised against it, but anyway First off dont name multiple divs the same ID names its just not going to work, name your ID's 256a 256b the following code will match the 256. Also I have added things for older browsers but I doubt it will work in older browsers.

The document.getElementsByTagName gets the div elements and puts them in an array. Then it sets to visble depending on your div id that you pass to it. I dont think document.getElementsByTagName works in older browsers.

Name your DIVS like so, or whatever you like

<div id="256a">
My content
</div>

To hide or show notice only the first few characters are needed.

Not as simple but not too hard. Hope this helps.

regards,
Mark

waldemar

1:22 pm on Jun 10, 2003 (gmt 0)

irock: strange... I tested with mozilla 1.2 (and opera 7.03) here without problems...

irock

3:53 pm on Jun 10, 2003 (gmt 0)

Thanks again outrun.

But I have two more questions...

1. How can I hide all layers upon loading the page?

2. The layer would not go on top of the other layer. I would like the layers to be displayed in the same area. What I'm doing is sorta like a folder thing. One folder would go on top of another when one clicks on a text link.

The result I'm getting now is layers extending down the page.

Any ideas?

tedster

6:44 pm on Jun 10, 2003 (gmt 0)

Just a note here. Names for ID's are supposed to begin with a letter and not a number. Some browsers will still deal with a number, but some won't, and they're not supposed to have to, according to the W3C.

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").
W3C Reference Page [w3.org]

outrun

11:23 pm on Jun 10, 2003 (gmt 0)

Ok you use abosulety positioning in a div and my advice as well is to set all the divs as visibility:invisible; as default except for one category, Havent bothered with layered combatibilty with NS4, like I said before this is not an ideal way to do what you want server side langauges would do better anyway here is the code.

</script>

This script will show the div you pass to it and hide the rest.

Your links to hide show div

Your Divs with abosulte positioning and required other properties set to what you like of course.

You can see that the 256 is set to invisible, wont be shown until the link is pressed to show it.

regards,
Mark
<edit>Syntax Error</edit>

tedster

2:41 am on Jun 11, 2003 (gmt 0)

We've got a guest writer in JavaScript Jumpstart this week, BlobFisk. His article is all about show/hide divs with javascript to create a dHTML menu system - and he pulls the code apart for you in a very useful fashion so you can customize as you will.

[webmasterworld.com...]

ashkosh

3:55 pm on Jul 24, 2003 (gmt 0)

hey guys i dont know if theres already been this code but i found a REAL SIMPLE script.
ok this goes in the <head>
_______________________________________
<script>
function showhide(id){
if (document.getElementById){
obj = document.getElementById(id);
if (obj.style.display == "none"){
obj.style.display = "";
} else {
obj.style.display = "none";
}
}
}
</script>
_________________________________________
now this goes in the <body>
<div style="display: none;" id="script">
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
<p><a href="#" onclick="showhide('script'); return(false);">hide again</a></p>
</div>

---END---

ok so that it! hope that helps others cuz it sure helped me! peace out

Dexie

9:01 pm on May 15, 2008 (gmt 0)

Is the code below javascript please :

Just trying to do the show/hide html thingie, but was trying to do it without js - is it possible ?

Seamless

12:04 pm on Jul 10, 2008 (gmt 0)

I've found the code below really useful, thanks guys.


var state = 'none';
function showhide(layer_ref){
if(state == 'block'){
state = 'none';
}else{
state = 'block';
}
if(document.all){ //IS IE 4 or 5 (or 6 beta)
eval("document.all." +layer_ref+ ".style.display = state");
}
if (document.layers) { //IS NETSCAPE 4 or below
document.layers[layer_ref].display = state;
}
if (document.getElementById &&!document.all) {
hza = document.getElementById(layer_ref);
hza.style.display = state;
}
}

I'm no javacscript expert, is there a way to modify the code so that the content of my div starts hidden?

It would be handy to choose the original state for different divs on a page.. eg.


onclick="showhide('advanced','starthidden');"


onclick="showhide('advanced','startvisible');"

Hope you can help.

Thanks

Seamless

12:13 pm on Jul 10, 2008 (gmt 0)

I've just worked out how to answer my previous post. you can use css to specify the original state using


display: none

either inline or in a external stylesheet.

I wouldn;t mind knowing if the the question in my previous post is still posiible tho.

Thanks

Seamless

lordofdavipers

7:31 pm on Aug 8, 2008 (gmt 0)

Hi,

I've tried using the code that waldemar posted and it works. I like its use and functionality. However, users have to double click to call the function unless you set the function to load in the body onload. That's fine.

Is there a way to set a cookie so the preference of any div is saved for the session or indefintely?

I can clarify if this doesn't make sense.

Andrew