Need to add 'hide all' function

**idesign123** · 12-12-2007, 01:05 AM

I'm hoping this will be easy for one of you javascript-wizards.

I have a script that is working perfectly for me.
But it would be MUCH easier to work with if I could add a 'hide all' function.

Here's what I have right now (code works fine)...

HTML Code:

<html>

 <head>
  <title>Test</title>
  <script type="text/javascript"><!--
//CONTENT SWAP
<!--
function HideContent(d) {
document.getElementById(d).style.display = "none";
}
function ShowContent(d) {
document.getElementById(d).style.display = "block";
}
function ReverseDisplay(d) {
if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; }
else { document.getElementById(d).style.display = "none"; }
}
// End -->
//-->
</script>
 </head>

 <body>
   <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
     <td>
<div id="photo1"><img src="photo1.jpg"></div>
<div id="photo2" style="display:none;"><img src="photo2.jpg"></div>
<div id="photo3" style="display:none;"><img src="photo3.jpg"></div>
<div id="photo4" style="display:none;"><img src="photo4.jpg"></div>
<div id="photo5" style="display:none;"><img src="photo5.jpg"></div>
<div id="photo6" style="display:none;"><img src="photo6.jpg"></div>
     </td>
     <td>
<div id="text1">text1</div>
<div id="text2" style="display:none;">text2</div>
<div id="text3" style="display:none;">text3</div>
<div id="text4" style="display:none;">text4</div>
<div id="text5" style="display:none;">text5</div>
<div id="text6" style="display:none;">text6</div>
     </td>
    </tr>
   <tr>
    <td colspan="2">
    <a href="javascript:HideContent('photo2');HideContent('photo3');HideContent('photo4');HideContent('photo5');HideContent('photo6');HideContent('text2');HideContent('text3');HideContent('text4');HideContent('text5');HideContent('text6');ShowContent('photo1');ShowContent('text1');">show1</a><br>
    <a href="javascript:HideContent('photo1');HideContent('photo3');HideContent('photo4');HideContent('photo5');HideContent('photo6');HideContent('text1');HideContent('text3');HideContent('text4');HideContent('text5');HideContent('text6');ShowContent('photo2');ShowContent('text2');">show2</a><br>
    <a href="javascript:HideContent('photo1');HideContent('photo2');HideContent('photo4');HideContent('photo5');HideContent('photo6');HideContent('text1');HideContent('text2');HideContent('text4');HideContent('text5');HideContent('text6');ShowContent('photo3');ShowContent('text3');">show3</a><br>
    <a href="javascript:HideContent('photo1');HideContent('photo2');HideContent('photo3');HideContent('photo5');HideContent('photo6');HideContent('text1');HideContent('text2');HideContent('text3');HideContent('text5');HideContent('text6');ShowContent('photo4');ShowContent('text4');">show4</a><br>
    <a href="javascript:HideContent('photo1');HideContent('photo2');HideContent('photo3');HideContent('photo4');HideContent('photo6');HideContent('text1');HideContent('text2');HideContent('text3');HideContent('text4');HideContent('text6');ShowContent('photo5');ShowContent('text5');">show5</a><br>
    <a href="javascript:HideContent('photo1');HideContent('photo2');HideContent('photo3');HideContent('photo4');HideContent('photo5');HideContent('text1');HideContent('text2');HideContent('text3');HideContent('text4');HideContent('text5');ShowContent('photo6');ShowContent('text6');">show6</a><br>
     </td>
   </tr>
  </table>
 </body>

</html>

NOTE: The links won't be in sequential order - this is just a simplified mock-up.

What I would like to do is have the javascript command itself look more like this...

HTML Code:

<a href="javascript:HideAll;ShowContent('photo2');ShowContent('text2');">show2</a>

I just don't know how to adjust the code so it has a 'hideall' function.

Ideas?

**Fang** · 12-12-2007, 01:42 AM

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>hide show</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script type="text/javascript">
var photo=null;
var text=null;
window.onload=function() {
var anchors=document.getElementById('toggle').getElementsByTagName('div');
for(var i=0; i<anchors.length; i++) {
    anchors[i].onclick=Function('toggle('+i+')');
    }
photo=document.getElementById('photo').getElementsByTagName('img');
text=document.getElementById('text').getElementsByTagName('div');
toggle(0);
};

function toggle(on) {
for(var i=0; i<photo.length; i++) {
    photo[i].style.display=text[i].style.display='none';
    }
photo[on].style.display=text[on].style.display='block';
}
</script>

<style type="text/css">
img {display:block;}
#toggle {
color:blue;
text-decoration:underline;
cursor:pointer;
}
</style>

</head>
<body>
   <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
     <td id="photo">
<img src="photo1.jpg" alt="photo1">
<img src="photo2.jpg" alt="photo2">
<img src="photo3.jpg" alt="photo3">
<img src="photo4.jpg" alt="photo4">
<img src="photo5.jpg" alt="photo5">
<img src="photo6.jpg" alt="photo6">
     </td>
     <td id="text">
<div>text1</div>
<div>text2</div>
<div>text3</div>
<div>text4</div>
<div>text5</div>
<div>text6</div>
     </td>
    </tr>
   <tr>
    <td id="toggle" colspan="2">
<div>show1</div>
<div>show2</div>
<div>show3</div>
<div>show4</div>
<div>show5</div>
<div>show6</div>
     </td>
   </tr>
  </table>

</body>
</html>

**idesign123** · 12-12-2007, 10:59 AM

Thanks for your help.

Unfortunately, it's not going to work in my case as the links on my actual page are not in sequential order (this was just a simplified demo).

In other words, on my actual page I have a 'show5' link at the top of the page, a 'show2' link at the bottom of the page, a second 'show5' link in the left column, etc.

Is there a solution that doesn't require that they be listed sequentially?

**john08** · 06-08-2008, 12:28 AM

Originally Posted by Fang

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>hide show</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script type="text/javascript">
var photo=null;
var text=null;
window.onload=function() {
var anchors=document.getElementById('toggle').getElementsByTagName('div');
for(var i=0; i<anchors.length; i++) {
    anchors[i].onclick=Function('toggle('+i+')');
    }
photo=document.getElementById('photo').getElementsByTagName('img');
text=document.getElementById('text').getElementsByTagName('div');
toggle(0);
};

function toggle(on) {
for(var i=0; i<photo.length; i++) {
    photo[i].style.display=text[i].style.display='none';
    }
photo[on].style.display=text[on].style.display='block';
}
</script>

<style type="text/css">
img {display:block;}
#toggle {
color:blue;
text-decoration:underline;
cursor:pointer;
}
</style>

</head>
<body>
   <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
     <td id="photo">
<img src="photo1.jpg" alt="photo1">
<img src="photo2.jpg" alt="photo2">
<img src="photo3.jpg" alt="photo3">
<img src="photo4.jpg" alt="photo4">
<img src="photo5.jpg" alt="photo5">
<img src="photo6.jpg" alt="photo6">
     </td>
     <td id="text">
<div>text1</div>
<div>text2</div>
<div>text3</div>
<div>text4</div>
<div>text5</div>
<div>text6</div>
     </td>
    </tr>
   <tr>
    <td id="toggle" colspan="2">
<div>show1</div>
<div>show2</div>
<div>show3</div>
<div>show4</div>
<div>show5</div>
<div>show6</div>
     </td>
   </tr>
  </table>

</body>
</html>

@Fang

Hi can you show me how to do this with just text? I only have text and not photo but would like to have the same effect.

Thanks,
John

**Fang** · 06-08-2008, 01:19 AM

Just strip out all img references:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>hide show</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script type="text/javascript">
var text=null;
window.onload=function() {
var anchors=document.getElementById('toggle').getElementsByTagName('div');
for(var i=0; i<anchors.length; i++) {
    anchors[i].onclick=Function('toggle('+i+')');
    }
text=document.getElementById('text').getElementsByTagName('div');
toggle(0);
};

function toggle(on) {
for(var i=0; i<text.length; i++) {
    text[i].style.display='none';
    }
text[on].style.display='block';
}
</script>

<style type="text/css">
img {display:block;}
#toggle {
color:blue;
text-decoration:underline;
cursor:pointer;
}
</style>

</head>
<body>
   <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
     <td id="text">
<div>text1</div>
<div>text2</div>
<div>text3</div>
<div>text4</div>
<div>text5</div>
<div>text6</div>
     </td>
    </tr>
   <tr>
    <td id="toggle">
<div>show1</div>
<div>show2</div>
<div>show3</div>
<div>show4</div>
<div>show5</div>
<div>show6</div>
     </td>
   </tr>
  </table>

</body>
</html>

Thread: Need to add 'hide all' function

Thread Tools

Display

Need to add 'hide all' function

With Text only

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions