www.webdeveloper.com
Results 1 to 5 of 5

Thread: Need to add 'hide all' function

  1. #1
    Join Date
    Feb 2004
    Posts
    21

    Need to add 'hide all' function

    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?

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    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>
    At least 98% of internet users' DNA is identical to that of chimpanzees

  3. #3
    Join Date
    Feb 2004
    Posts
    21
    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?

  4. #4
    Join Date
    May 2008
    Posts
    5

    With Text only

    Quote 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

  5. #5
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    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>
    At least 98% of internet users' DNA is identical to that of chimpanzees

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles