www.webdeveloper.com
Results 1 to 4 of 4

Thread: Div Show/Hide issue

  1. #1
    Join Date
    Oct 2010
    Posts
    5

    Div Show/Hide issue

    My goal is to be able to have a page with multiple hidden DIVs. On click of a link, a single DIV (box) should appear. Now, either on second click of that link, it should close OR on click of another link the first DIV should close and the second should open. At any one time, only one DIV (box) should be visible with the option to close DIVs by clicking a second time on the open link.

    I have only been able to get 2/3 the way there. I am able to click on a link and open it, click a second link which closes the first and opens the second, but I don't know how to close the last open link so that no DIVs are shown, as when the page originally loaded.

    I hope this is not as confusing as it sounds when I read it back....here is my example code:

    <html>
    <head>
    <title>Hide DIV Test Run</title>
    <script language="javascript">
    function show(selected) {
    var openDiv = document.getElementsByTagName("div");
    for(var x=0; x<openDiv.length; x++) {
    name = openDiv[x].getAttribute("name");
    if (name == 'openDiv') {
    if (openDiv[x].id == selected) {
    openDiv[x].style.display = 'block';
    }
    else {
    openDiv[x].style.display = 'none';
    }
    }
    }
    }
    </script>
    <style>
    body {
    width:50%;
    }
    #openDiv1 {
    display:none;
    border:solid 2px black;
    width:200px;
    }
    #openDiv2 {
    display:none;
    border:solid 2px black;
    width:200px;
    }
    </style>
    </head>
    <body>
    <div id="body">
    <p>This is <a href="#" id="link1" onclick="show('openDiv1')">some</a> test text. Sentence #1.
    <div name="openDiv" ID="openDiv1">This is the hidden text.</div>
    <p>This is even <a href="#" id="link2" onclick="show('openDiv2')">more</a> text. Sentence #2
    <div name="openDiv" ID="openDiv2">This is more hidden text.</div>
    </div>
    </body>
    </html>

    I appreciate the feedback,
    Kevin

  2. #2
    Join Date
    Aug 2009
    Posts
    593
    Based on your example...

    HTML 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>Hidden Content</title>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    		<style type="text/css">
    
    			A {
    				color: #00f;
    			}
    
    			.Sentence {
    				margin: 10px 0px;
    			}
    
    			.openDiv {
    				border: solid 2px #000;
    				width: 200px;
    			}
    
    		</style>
    
    		<script type="text/javascript">
    
    			function show($id)
    			{
    				var
    					$elements = document.getElementsByTagName('div'),
    					$i;
    
    				for ($i = 0; $i < $elements.length; $i++){
    					if ($elements[$i].className === 'openDiv') {
    						$elements[$i].style.display = ($elements[$i].id == $id && $elements[$i].style.display != 'block') ? 'block' : 'none';
    					}
    				}
    			}
    
    		</script>
    
    	</head>
    	<body>
    
    		<div>
    			<div class="Sentence">
    				This is <a href="#" onclick="show('openDiv1');">some</a> test text. Sentence #1
    				<div class="openDiv" id="openDiv1">This is the hidden text.</div>
    			</div>
    			<div class="Sentence">
    				This is even <a href="#" onclick="show('openDiv2');">more</a> text. Sentence #2
    				<div class="openDiv" id="openDiv2">This is more hidden text.</div>
    			</div>
    		</div>
    		<script type="text/javascript">show('');</script>
    
    	</body>
    </html>

  3. #3
    Join Date
    Mar 2009
    Posts
    468
    1. Give all of the DIVs you want to be able to display or hide a unique HTML id
    2. Put all of those ID's in an array--for what is shown here its a global array--it doesn't have to be though.

    Code:
    var Arr= Array("div1_id", "div2_id");
    
    
    function showThis(id_of_that_which_is_to_be_displayed){
           len = Arr.length;
           var x, i, len ;
    
           for(i = 0; i < len; i++){
                x= document.getElementById(Arr[i]);
                if (Arr[i] == id_of_that_which_is_to_be_displayed){
                      x.style.display = "block";
                  }
                  else {
                      x.style.display = "none";
                   }
            }
    }
    Last edited by Tcobb; 11-23-2010 at 04:13 PM.

  4. #4
    Join Date
    Oct 2010
    Posts
    5
    Perfect. I appreciate the help from both of you...

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