www.webdeveloper.com
Results 1 to 9 of 9

Thread: hide/show div script when onclick picture or text

  1. #1
    Join Date
    Jul 2009
    Posts
    3

    Unhappy hide/show div script when onclick picture or text

    Hi there,

    I am looking for a show/hide script. I have found a lot of scripts but I am looking for one where not only a text link, but a picture as well is clickable.

    The picture should change when clicked down, for example an arrow pointing down when the div is hidden en pointing up when the div is showed.

    Can you help me?

    Thanks!

  2. #2
    Join Date
    Nov 2003
    Location
    Worthington, OH, USA
    Posts
    3,634
    Off the top of my head:

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    	<title>Test</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script type="text/javascript" id="myscript" >
    
    function showHide(divID, imgID){
    	if (document.getElementById(divID).style.display == "none") {
    		document.getElementById(divID).style.display = "block";
    		document.getElementById(imgID).src = "Images/upArrow.gif";
    	} else {
    		document.getElementById(divID).style.display = "none";
    		document.getElementById(imgID).src = "Images/dnArrow.gif";
    	}
    }
    
    </script> 
    <style type="text/css">
    
    </style>
    </head>
    
    <body>
    <img id="dirImg" src="Images/upArrow.gif" onclick="showHide('hideDiv',this.id)" />
    <div id="hideDiv" >
    	Some Text
    	<a href="#" onclick="showHide('hideDiv','dirImg')">Hide this DIV</a>
    </div>
    
    </body>
    </html>
    54 68 65 42 65 61 72 4D 61 79

  3. #3
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,259

    Lightbulb

    Do you have some code already?

    If so, add this to where it would apply:
    Code:
    <html>
    <head>
    <title>Toggle Image</title>
    <script type="text/javascript">
    // From: http://www.webdeveloper.com/forum/showthread.php?t=212527
    
    function toggle(info) {
      var sel = document.getElementById(info.id);
      if (sel.alt == 'arrow up') {
    	  sel.src = '';
    	  sel.alt = 'arrow down';
      } else {
    	  sel.src = '';
    	  sel.alt = 'arrow up';
      }
    }
    </script>
    </head>
    <body>
    <img id="arrowDirection" src='' alt='arrow down' onclick="toggle(this)">
    </body>
    </html>
    Put your image URL into the proper src='' positions.

  4. #4
    Join Date
    Jul 2009
    Posts
    3
    hey bear thanks for your reply.

    I only have 2 questions if I may;

    -I would like to place text next to the image, so that the text as well as the image is clickable to show the div
    -How do I change the code so that by default the hidden div is not showing?

    thanks!

  5. #5
    Join Date
    Feb 2006
    Posts
    198

  6. #6
    Join Date
    Nov 2003
    Location
    Worthington, OH, USA
    Posts
    3,634
    No changes to the JS, and just a couple to the HTML:

    HTML Code:
    <a href="#" onclick="showHide('hideDiv','dirImg')"><img id="dirImg" src="Images/dnArrow.gif" onclick="showHide('hideDiv',this.id)" style="text-decoration:none;border:none;"/>Click here</a>
    <div id="hideDiv" style="display:none">
    	Some Text
    	<a href="#" onclick="showHide('hideDiv','dirImg')">Hide this DIV</a>
    </div>
    The onclick for the image is optional as it is part of the <a> element, but....
    54 68 65 42 65 61 72 4D 61 79

  7. #7
    Join Date
    Jul 2009
    Posts
    3
    GREAT! thanks dude!

  8. #8
    Join Date
    Jun 2012
    Posts
    1
    Is it possible to do this with 2 different images and 2 different text options I have been trying to work my way through it for a couple days

  9. #9
    Join Date
    Jun 2012
    Posts
    5
    Sometimes you may want to hide several things and show one.

    Here is a script I use to hide everything and then show the one thing I want to display. So whether it is hide 1 and show 1 or hide many and show 1 this should work. One thing I like to do is to set all the div names into a variable and have it in the link like this:

    *Example is in ColdFusion....

    <CFSET Hide = Program, Author, Date, Comments, Title, Location>

    <CFOUTPUT>
    <a id="displayText" href="javascript:HideNShow('#Hide#', 'Title');">Edit Title</a>
    </CFOUTPUT>
    or you can list it out like this:

    <a id="displayText" href="javascript:HideNShow('Program, Author, Date, Comments, Title, Location', 'Title');">Edit Title</a>

    here is the JavaScript function:

    function HideNShow (HideThese, ShowThis)
    {
    var temp = (HideThese);
    var temparray = new Array();
    temparray = temp.split(', ');
    var arLen=temparray.length;
    for ( var i=0, len=arLen; i<len; ++i ){
    var ele = document.getElementById(temparray[i]);
    ele.style.display = "none";
    }
    document.getElementById(ShowThis).style.display='block';
    }
    Last edited by kevhouston740; 06-14-2012 at 01:35 PM. Reason: clarification

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