SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Jan 2007
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    multiple hidden div's on a page with 'plus' and 'minus' gifs?

    Hello everyone,

    I'm using the following code to 'hide' or 'show' hidden content on a page. The javascript toggles the display of the content and changes the image from 'plus.gif' to 'minus.gif'. However, the script was written to work with a single item. With two or more 'hidden' divs (as I have below), there are multiple instances of the gif's (plus and minus) and the code will only change the first one.

    Can the code (the javascript OR the html) be changed so that there can be multiple 'hidden' divs on a page and the appropriate gif changes?

    Thanks in advance!

    Code:
    <script language="javascript">
    imageX='plus';
    function toggleDisplay(e){
    element = document.getElementById(e).style;
     if (element.display=='none') {element.display='block';}
     else {element.display='none';}
     if (imageX=='plus') {document.getElementById('imagePM').src='minus.gif';imageX='minus';}
     else {document.getElementById('imagePM').src='plus.gif';imageX='plus';}
    }
    </script>
    HTML Code:
    <!-- hidden div #1 -->
    <div><a title="Show Tables" href="javascript:toggleDisplay('hiddendiv1')"><img src="plus.gif" name="imagePM" width="12" height="12" border="0" id=imagePM /></a> title to show for hidden div #1 </div>
    <div style="display:none; border: 1px solid #ccc; padding: 10px;" id="hiddendiv1">
      <p style="margin: 0; padding: 0;">content of hidden div #1</p>
    </div>
    <!-- hidden div #2 -->
    <div><a title="Show Tables" href="javascript:toggleDisplay('hiddendiv2')"><img src="plus.gif" name="imagePM" width="12" height="12" border="0" id=imagePM /></a> title to show for hidden div #2 </div>
    <div style="display:none; border: 1px solid #ccc; padding: 10px;" id="hiddendiv2">
      <p style="margin: 0; padding: 0;">content of hidden div #2</p>
    </div>

  2. #2
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You shouldn't duplicate ID's on the page. As you can see, the image for the div has the div name with _img on the end.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title>Untitled Document</title>
            <link rel="stylesheet" type="text/css" media="screen" />
            <script type="text/javascript">
            function toggle(el) {
                if(typeof(el) == 'string')
                    el = document.getElementById(el);
                var img = document.getElementById(el.id + '_img');
                if(!img) {
                    alert('Unable to locate image');
                    return;
                }
                switch(el.style.display) {
                    case 'none' : 
                        img.src = 'minus.gif';
                        el.style.display = 'block';                
                    break;
                    case 'block' :
                        img.src = 'plus.gif';
                        el.style.display = 'none';        
                    break;
                    default:
                        img.src = 'minus.gif';
                        el.style.display = 'block';
                    break;
                }
                alert(img.src);
                alert(el.style.display);
            }
            </script>
        </head>
        <body>
            
        <!-- hidden div #1 -->
        <div><a title="Show Tables" href="javascript:toggle('hiddendiv1')"><img src="plus.gif" name="imagePM" width="12" height="12" border="0" id="hiddendiv1_img" /> title to show for hidden div #1 </a></div>
        <div style="display:none; border: 1px solid #ccc; padding: 10px;" id="hiddendiv1">
            <p style="margin: 0; padding: 0;">content of hidden div #1</p>
        </div>
        <!-- hidden div #2 -->
        <div><a title="Show Tables" href="javascript:toggle('hiddendiv2')"><img src="plus.gif" name="imagePM" width="12" height="12" border="0" id="hiddendiv2_img" /> title to show for hidden div #2 </a></div>
        <div style="display:none; border: 1px solid #ccc; padding: 10px;" id="hiddendiv2">
            <p style="margin: 0; padding: 0;">content of hidden div #2</p>
        </div>
    
        </body>
    </html>


  3. #3
    SitePoint Member
    Join Date
    Jan 2007
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow, that is fantastic. Thank you so much for the help and answering so quickly! I really appreciate it.

  4. #4
    SitePoint Member
    Join Date
    Jul 2007
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is a script example that I developed for a simple and flexible solution.

    It's very similar to your original code, with the difference I don't wrap an <a> tag around the image, but I use an "onclick" to activate it. The only requirements is the activating element is has a "Parent" element that is the sibling before the show/hide element.


    Code:
    <script type="text/javascript">
    function showHide(vThis)
    {
    // http://www.javascriptjunkie.com
    // alert(vSibling.className + " " + vDef_Key);
        vParent = vThis.parentNode;
        vSibling = vParent.nextSibling;
    
        if(vSibling.style.display == "none")
        {
          vThis.src="/img/collapse.gif";
          vThis.alt = "Hide Div";
          vSibling.style.display = "block";
        } else {
          vSibling.style.display = "none";
          vThis.src="/img/expand.gif";
          vThis.alt = "Show Div";
        } 
    return;
    }
    </script>

    HTML Code:
    <?xml version="1.0" encoding="iso-8859-1"?>
    <!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">
    <head>
    <title>SHOW/HIDE Div with Javascript</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    </head>
    <body>
    <h3>Show/Hide Div Example</h3>
    <div style="margin-top:5px;">
    <h4><img src="/img/expand.gif" alt="Show Div" border="0" style="margin-right:6px; margin-top:3px; margin-bottom:-3px; cursor:pointer;" onclick="showHide(this);" />Title #1</h4>
    <div style="margin-top:5px; display:none; border:1px solid red;">
    <p> THis is the content of the #1 div</p>
    </div>
    <div><img src="/img/expand.gif" alt="Show Div" border="0" style="margin-right:6px; margin-top:3px; margin-bottom:-3px; cursor:pointer;" onclick="showHide(this);" />Title #2</div>
    <ul style="margin-top:5px; display:none; border:1px solid red;">
        <li> THis is the content of the #2 div</li>
        <li> This is more content </li>
    </ul>
    </div>
    </div>
    </body>
    </html>


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
  •