Results 1 to 5 of 5

Thread: Javascript toggle with a difference

  1. #1
    Join Date
    Jul 2010
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Javascript toggle with a difference

    Hi all

    I am using a basic JavaScript toggle function to show/hide a series of <div> blocks.

    All works fine, but now what I want to do is create a link to toggle all of them,irrespective of whether they are shown or hidden. All should be shown.

    The page in question is at: www.pinosolocal.net/catbrowser.asp

    The script I am using for the normal toggle is:

    Code:
    <script type="text/javascript">
    <!--
        function toggle_visibility(id) {
           var e = document.getElementById(id);
           if(e.style.display == 'none')
              e.style.display = 'block';
           else
              e.style.display = 'none';
        }
        
    //-->
    </script>
    The div's are defined like this:
    Code:
    <div id="<%=MCat%>" style="display: none">
    Any help would be appreciated. I'm no JavaScript fundi, and I've spent too much time on this as it is LOL!

    Regards
    Glen

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    you appear to have a solution can only suggest code reduction

    Code:
    function showAnswer(obj){
     var allDivs=document.getElementById('container').getElementsByTagName('div'), i=0, ad;
     var ud=obj.firstChild.nodeValue=='Expand All Categories';
     while(ad=allDivs[i++]){
      ad.className=='answer_box'?ad.style.display=ud?'block':'none':null;
     }
    obj.firstChild.nodeValue=ud?'Collapse All Categories':'Expand All Categories';
    }
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. The Following User Says Thank You to vwphillips For This Useful Post:

    GlenStobbs (07-27-2010)

  4. #3
    Join Date
    Jul 2010
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Smile

    Yes, been playing with snippets I found out and about. This one seems to work, though occasionally [in several browsers], the right hand column does not expand until you re-click the expand link.

    I will look at trimming down the code as you suggest.

    Many thanks
    Glen

  5. #4
    Join Date
    Aug 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    hello........ friend

    All works fine, but now what I want to do is create a link to toggle all of them,irrespective of whether they are shown or hidden. All should be shown.


    Thanks..............

    ________________---
    For connecting to remote desktop of another computer (via internet or network) and controls. Also connecting to VNCServer through Repeater or directly to VNCServer and a lot of other configuration options. For more details VNCServer

  6. #5
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    .answer_box {
      display:none;
    }
    
    /*]]>*/
    </style><script type="text/javascript">
    /*<![CDATA[*/
    function showAll(){
     var allDivs=document.getElementById('container').getElementsByTagName('div'), i=0, ad;
     while(ad=allDivs[i++]){
      if(ad.className=='answer_box'){
       ad.style.display='block';
      }
     }
    }
    /*]]>*/
    </script></head>
    
    <body>
    <input type="button" name="" value="Test" onclick="showAll()"/>
    
    <div id="container" >
    <div class="answer_box" >1</div>
    <div class="answer_box" >2</div>
    <div class="answer_box" >3</div>
    <div class="answer_box" >4</div>
    <div class="answer_box" >5</div>
    </div>
    </body>
    
    </html>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

Bookmarks

Posting Permissions

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