SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Canada
    Posts
    730
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    toggling 2 elements

    I want to toggle two elements making one display none and the other display block. And by clicking again switch the displays:

    Code:
    		<script type="text/javascript" language="javascript1.3">
    			function toggle(id){
    				regid = "regid_" + id;
    				img = "img_" + id;
    				forumid = "forumid_" + id;
    				divElement = document.getElementById(regid);
    				imgElement = document.getElementById(img);
    				forumElement = document.getElementById(forumid);
    				if (divElement){
    						if (divElement.className == 'closed'){
    								divElement.className = "open";
    								forumElement.classname = "closed";
    								imgElement.src = "includefiles/images/opened.gif";
    								}else{
    								divElement.className = "closed";
    								forumElement.classname = "open";
    								imgElement.src = "includefiles/images/closed.gif";
    								}
    						}
    				}
    				/*function toggle(id) {
    					var el = document.getElementById("regid_" + id);
    					if ( div.style.display = 'block' ) {
    						div.style.display = 'none';
    					}
    					else {
    						div.style.display = 'block';
    					}
    				}*/				
    		</script>
    		<style type="text/css">		
    			.open {
    				display: block;
    			}
    			.closed {
    				display: none;
    			}
    		</style>		
    			<table class="" id="" border="1" style="border: 1px;">
    <tr>
    <td id="tdid_0">
    <div id="regid_0" class="closed" style="display: block;"><a onclick="toggle('item0');"><img src="includefiles/images/closed.gif" id="img_item0" alt="Click to Expand" border="0" /></a>blablah</div><br />
    
    <div id="forumid_0" class="open" style="display: none;">gagah googoooh</div><br /></td>
    
    </tr>
    Compare bible texts (and other tools):
    TheWheelofGod

  2. #2
    Google Engineer polvero's Avatar
    Join Date
    Oct 2003
    Location
    Mountain View
    Posts
    567
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do you have a question?

  3. #3
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Canada
    Posts
    730
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well yeah!

    I want to toggle with:
    Code:
    <div id="regid_0" class="closed" style="display: block;">
    blablah</div>
    and
    Code:
    <div id="forumid_0" class="open" style="display: none;">gagah googoooh</div>
    Upon clicking one would switch to the other.

    Do you get it?
    Compare bible texts (and other tools):
    TheWheelofGod

  4. #4
    Google Engineer polvero's Avatar
    Join Date
    Oct 2003
    Location
    Mountain View
    Posts
    567
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    write a generic toggle function

    Try changing your toggle function to this:
    Code:
    function toggle() {
      for (var i=0, el; el = document.getElementById(arguments[i]); i++) {
        el.style.display = (el.style.display != 'none' ? 'none' : '' );
      }
    }
    Now you can toggle as many items as you want at once!

    Code:
    <div id="toggler">Click Toggle stuff</div>
    
    <div id="foo"> this is foo </div>
    <div id="bar"> this is bar </div>
    
    <script>
      var el = document.getElementById('toggler');
      el.onclick = function() {
        toggle('foo', 'bar');
      };
    </script>
    Last edited by polvero; Nov 29, 2007 at 23:19. Reason: i left in a console log by accident


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
  •