homepage Welcome to WebmasterWorld Guest from 54.242.231.109
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

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




msg:1474101
 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




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

This will get you started

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

<script language=javascript type='text/javascript'>
function hideDiv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('hideShow').style.visibility = 'hidden';
}
else {
if (document.layers) { // Netscape 4
document.hideShow.visibility = 'hidden';
}
else { // IE 4
document.all.hideShow.style.visibility = 'hidden';
}
}
}

function showDiv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('hideShow').style.visibility = 'visible';
}
else {
if (document.layers) { // Netscape 4
document.hideShow.visibility = 'visible';
}
else { // IE 4
document.all.hideShow.style.visibility = 'visible';
}
}
}
</script>

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

<a href="javascript:hideDiv()">Hide Div</a>

and this to show it

<a href="javascript:showDiv()">show Div</a>

That simple

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

irock




msg:1474103
 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.

<div id="256MB"><img src=xxx> $71</div>
<div id="512MB"><img src=yyy> $167</div>
<div id="1GB"><img src=zzz> $333</div>

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




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

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

<script language="javascript">
<!--

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;
}
}
//-->
</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




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

waldemar,

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

outrun




msg:1474106
 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.

<script language=javascript type='text/javascript'>
function hideDiv(pass) {
var divs = document.getElementsByTagName('div');
for(i=0;i<divs.length;i++){
if(divs[i].id.match(pass)){//if they are 'see' divs
if (document.getElementById) // DOM3 = IE5, NS6
divs[i].style.visibility="hidden";// show/hide
else
if (document.layers) // Netscape 4
document.layers[divs[i]].display = 'hidden';
else // IE 4
document.all.hideShow.divs[i].visibility = 'hidden';
}
}
}

function showDiv(pass) {
var divs = document.getElementsByTagName('div');
for(i=0;i<divs.length;i++){
if(divs[i].id.match(pass)){
if (document.getElementById)
divs[i].style.visibility="visible";
else
if (document.layers) // Netscape 4
document.layers[divs[i]].display = 'visible';
else // IE 4
document.all.hideShow.divs[i].visibility = 'visible';
}
}
}
</script>

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>

<div id="256b">
Blah
</div>

<div id="512a">
Blah
</div>

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

<a href="javascript:hideDiv('256')">Hide Div 256</a>
<a href="javascript:showDiv('256')">Show Div 256</a>
<a href="javascript:hideDiv('512')">Hide Div 512</a>
<a href="javascript:showDiv('512')">Show Div 512</a>

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

regards,
Mark

waldemar




msg:1474107
 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




msg:1474108
 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




msg:1474109
 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




msg:1474110
 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 language=javascript type='text/javascript'>

function showDiv(pass) {
var divs = document.getElementsByTagName('div');
for(i=0;i<divs.length;i++){
if(divs[i].id.match(pass)){//if they are 'see' divs
if (document.getElementById) // DOM3 = IE5, NS6
divs[i].style.visibility="visible";// show/hide
else
if (document.layers) // Netscape 4
document.layers[divs[i]].display = 'visible';
else // IE 4
document.all.divs[i].visibility = 'visible';
} else {
if (document.getElementById)
divs[i].style.visibility="hidden";
else
if (document.layers) // Netscape 4
document.divs[i].visibility = 'hidden';
else // IE 4
document.all.divs[i].visibility = 'hidden';
}
}
}

</script>

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

Your links to hide show div

<a href="javascript:showDiv('F256')">show 256 Div hide rest</a>
<a href="javascript:showDiv('F512')"> show 512 Div hide rest</a>

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

<div id="F2561" style="position: absolute; left:5px; top:54px; background-color: #0093DD; border: 1px none #000000; visibility: hidden">
256 Here </div>

<div id="F512" style="position: absolute; left:5px; top:54px; background-color: #0093DD; border: 1px none #000000" >
512 Here
</div>

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




msg:1474111
 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




msg:1474112
 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




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

Is the code below javascript please :

<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>

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

Seamless




msg:3695326
 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');"

or


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

Hope you can help.

Thanks

Seamless

Seamless




msg:3695329
 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




msg:3718788
 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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved