#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    2
    Rep Power
    0

    Show/Hide Visibility w/ Children/Decendants


    Hi. This is my First Post, So I'll try to make it a Good One.

    What I'm Trying to do is have a horizontal menu of links that when clicked, change between one of 5 divs below it. So Far I got it working Great, but only as long as the target div does not have any descendants. And I want to nest div's and img's and links inside. I don't know if its possible to do with this code? Or possible at all...

    javascript Code:
     
     
     
    <head>
     
    <!-- Call Toggle -->
    <script type="text/javascript">
    function show_visibility(IDS){ hide_visibility(); document.getElementById(IDS).style.display = 'block'; }
     
    function hide_visibility(){ var sel = document.getElementById('toggleContent').getElementsByTagName('div');
    for (var i=0; i<sel.length; i++) { sel[i].style.display = 'none'; }
    }
    </script>
     
    </head>
     
    <body>
     
    <div id="mainContent">
     
    	<div id="toggleLinks">
     
    	<a href="javascript:;" onclick="show_visibility('contentOptionOne')">
    <h4>WEB</h4></a>
     
    	<a href="javascript:;" onclick="show_visibility('contentOptionTwo')"><h4>GRAPHIC</h4></a>
     
    	<a href="javascript:;" onclick="show_visibility('contentOptionThree')"><h4>MARKET</h4></a>
     
    	<a href="javascript:;" onclick="show_visibility('contentOptionFour')"><h4>PHOTO</h4></a>
     
    	<a href="javascript:;" onclick="show_visibility('contentOptionFive')"><h4>MEDIA</h4></a>
     
    	</div>
     
    	<div id="toggleContent">
     
    		<div id="contentOptionOne" class="contentOption" style="display: block;">
     
    			<div class="toggleRow">
     
    				<div class="toggleRowButton01">
    				<h2>BASIC</h2>
    				</div>
     
    				<div class="toggleRowButton02">
    				<a href="">STANDARD</a>
    				</div>
     
    				<div class="toggleRowButton03">
    				<a href="">ADVANCED</a>
    				</div>
     
    			</div>
     
    		</div>
     
     		<div id="contentOptionTwo" class="contentOption" style="display: none;">
     
    			<div class="toggleRow">
     
    				<div class="toggleRowButton01">
    				<h2>BASIC</h2>
    				</div>
     
    				<div class="toggleRowButton02">
    				<a href="">STANDARD</a>
    				</div>
     
    				<div class="toggleRowButton03">
    				<a href="">ADVANCED</a>
    				</div>
     
    			</div>
     
     
    		</div>
     
     
    		<div id="contentOptionThree" class="contentOption" style="display:none;">
     
    			<div class="toggleRow">
     
    				<div class="toggleRowButton01">
    				<h2>BASIC</h2>
    				</div>
     
    				<div class="toggleRowButton02">
    				<a href="">STANDARD</a>
    				</div>
     
    				<div class="toggleRowButton03">
    				<a href="">ADVANCED</a>
    				</div>
     
    			</div>
     
    		</div>
     
     
    		<div id="contentOptionFour" class="contentOption" style="display:none;">
     
    			<div class="toggleRow">
     
    				<div class="toggleRowButton01">
    				<h2>BASIC</h2>
    				</div>
     
    				<div class="toggleRowButton02">
    				<a href="">STANDARD</a>
    				</div>
     
    				<div class="toggleRowButton03">
    				<a href="">ADVANCED</a>
    				</div>
     
    			</div>
     
    		</div>
     
     
    		<div id="contentOptionFive" class="contentOption" style="display:none;">
     
    			<div class="toggleRow">
     
    				<div class="toggleRowButton01">
    				<h2>BASIC</h2>
    				</div>
     
    				<div class="toggleRowButton02">
    				<a href="">STANDARD</a>
    				</div>
     
    				<div class="toggleRowButton03">
    				<a href="">ADVANCED</a>
    				</div>
     
    			</div>
     
    		</div>
     
    	</div>
     
    </div>
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,188
    Rep Power
    184
    Code:
    <head>
    
    <style>
    .toggleRow {
    display:none;
    }
    .toggleRow2 {
    display:block;
    }
    </style>
    
    <!-- Call Toggle -->
    <script type="text/javascript">
    function show_visibility(classNameKey) { 
    hide_visibility();
    document.getElementsByClassName("contentOption")[classNameKey].getElementsByTagName("div")[0].className="toggleRow2";
    }
    
    function hide_visibility() {
    var sel = document.getElementsByClassName("contentOption");
    for (var i=0; i<sel.length; i++) { 
    document.getElementsByClassName("contentOption")[i].getElementsByTagName("div")[0].className='toggleRow';
    }
    }
    </script>
    
    </head>
    
    <body>
    
    <div id="mainContent">
    
    	<div id="toggleLinks">
    										
    	<a href="#" onclick="show_visibility('0')">
    <h4>WEB</h4></a>
    
    	<a href="#" onclick="show_visibility('1')"><h4>GRAPHIC</h4></a>
    
    	<a href="#" onclick="show_visibility('2')"><h4>MARKET</h4></a>
    
    	<a href="#" onclick="show_visibility('3')"><h4>PHOTO</h4></a>
    
    	<a href="#" onclick="show_visibility('4')"><h4>MEDIA</h4></a>
    	
    	</div>
    
    	<div id="toggleContent">
    
    		<div id="contentOptionOne" class="contentOption">
    				
    			<div class="toggleRow">
    			
    				<div class="toggleRowButton01">
    				<h2>BASIC</h2>
    				</div>
     
    				<div class="toggleRowButton02">
    				<a href="">STANDARD</a>
    				</div>
     
    				<div class="toggleRowButton03">
    				<a href="">ADVANCED</a>
    				</div>
    
    			</div>
    	
    		</div>
     
     		<div id="contentOptionTwo" class="contentOption">
    		
    			<div class="toggleRow">
    			
    				<div class="toggleRowButton01">
    				<h2>BASIC</h2>
    				</div>
     
    				<div class="toggleRowButton02">
    				<a href="">STANDARD</a>
    				</div>
     
    				<div class="toggleRowButton03">
    				<a href="">ADVANCED</a>
    				</div>
    
    			</div>
    
    		</div>
     
     
    		<div id="contentOptionThree" class="contentOption">
    		
    			<div class="toggleRow">
    			
    				<div class="toggleRowButton01">
    				<h2>BASIC</h2>
    				</div>
     
    				<div class="toggleRowButton02">
    				<a href="">STANDARD</a>
    				</div>
     
    				<div class="toggleRowButton03">
    				<a href="">ADVANCED</a>
    				</div>
    
    			</div>
    			
    		</div>
     
     
    		<div id="contentOptionFour" class="contentOption">
    		
    			<div class="toggleRow">
    			
    				<div class="toggleRowButton01">
    				<h2>BASIC</h2>
    				</div>
     
    				<div class="toggleRowButton02">
    				<a href="">STANDARD</a>
    				</div>
     
    				<div class="toggleRowButton03">
    				<a href="">ADVANCED</a>
    				</div>
     
    			</div>
    		
    		</div>
     
     
    		<div id="contentOptionFive" class="contentOption">
    		
    			<div class="toggleRow">
    			
    				<div class="toggleRowButton01">
    				<h2>BASIC</h2>
    				</div>
     
    				<div class="toggleRowButton02">
    				<a href="">STANDARD</a>
    				</div>
     
    				<div class="toggleRowButton03">
    				<a href="">ADVANCED</a>
    				</div>
    
    			</div>
    			
    		</div>
     
    	</div>
    	
    </div>
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    2
    Rep Power
    0
    Nice... Thanks Loone... That works almost perfectly, only prob is now there is no contentOption shown by default. I'm sure it's prob something simple I'm missing...

IMN logo majestic logo threadwatch logo seochat tools logo