SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot SystemLogic's Avatar
    Join Date
    Jan 2001
    Location
    Northern VA
    Posts
    194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How can I hide other open DIV's

    So I'm using this script:

    http://www.harrymaugans.com/2007/03/...cript-and-css/

    In order to hide/show DIVs on a page I'm building. You can see this page here:

    http://www.trimegatech.com/services/...ess/index2.php

    So you can see that if you click Network Design/Installation it unhides a DIV, and same with Wireless Networks.

    The question I have is how can I make it so that if I click another link to unhide a DIV, it hides the others? The way it is now, it will just stack on top of each other.

  2. #2
    SitePoint Member
    Join Date
    Sep 2007
    Location
    USA
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Without changing your markup, you can change a few of the attributes, and keep it relatively the same and accomplish what you're looking for.

    Here's one way of doing it:

    Code CSS:
    <style type="text/css">
    .toggle-paragraph {
    	display:none;
    }
    </style>


    Code JavaScript:
    <script type="text/javascript">
    // TOGGLE PARAGRAPH
    function toggleParagraph(id){
    	// FIND ALL PARAGRAPHS
    	var paragraphs = document.getElementsByTagName('p');
    	for(var i = 0; i < paragraphs.length; i++){
    	    // FIND PARAGRAPHS WITH SPECIFIC CLASS NAME
    		if(paragraphs[i].className == 'toggle-paragraph'){
    		    // SET THEM TO DISPLAY NONE
    			paragraphs[i].style.display = 'none';
    		}
    	}
    	// SET SPECIFIC PARAGRAPH TO DISPLAY BLOCK
    	document.getElementById(id).style.display = 'block';
    }
    </script>

    Code HTML4Strict:
    <span class="service">
    	<h2>Network Services</h2>
    	<p style="font-family: verdana; font-size: 10px;">
    		  <a href="javascript:toggleParagraph('network_design');">Network Design/Installation</a>
    		| <a href="javascript:toggleParagraph('network_wireless');">Wireless Networks</a>
    		| Firewall/VPN Solutions
    		| Remote Access
    		| Storage
    		| Desktop Services
    		| Voice/Data Wiring Installs
    	</p>
    	<p class="toggle-paragraph" id="network_design">
    		<br />
    		Network design
    	</p>
    	<p class="toggle-paragraph" id="network_wireless">
    		<br />
    		Wireless networks
    	</p>
    </span>

    This script easily finds all <p> tags, iterates through the array and finds the ones which have the toggle-paragraph className, sets them to display = 'none', and then finally sets the selected paragraph to display = 'block'.

    It's rudimentary, but it will do what you are aiming for.

    I tested it in Firefox 2.0.0.7, Internet Explorer 6, and Safari 3.0.3 Beta for Windows. All of them work fine, except for MSIE6. It squaks with a security alert. It says, "To help protect your security, Internet Explorer has restricted this file from showing active content that could access your computer. Click here for options...". Right-clicking on the yellow bar and selecting "Allow Blocked Content" enables MSIE6 to use the script.

  3. #3
    SitePoint Member
    Join Date
    Sep 2007
    Location
    USA
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh, and by the way - I modified your code to toggle paragraph tags, since your markup was using <p> tags instead of <div> tags.

    If you want to toggle divs, then you'll have to change your markup accordingly...and then you'll probably want to rename your class and function names.

  4. #4
    SitePoint Zealot SystemLogic's Avatar
    Join Date
    Jan 2001
    Location
    Northern VA
    Posts
    194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Greg,

    Thanks for this, but not having it work correctly in IE6 is obviously a big problem! Is there some sort of other workaround? I don't mind changing the markup if needed.

    Also, is there any benefit to using div rather than p for the hidden text?

  5. #5
    SitePoint Addict
    Join Date
    Jun 2007
    Posts
    396
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I'm almost certain that the IE6 warning only appears on local files doesn't it?

  6. #6
    SitePoint Member
    Join Date
    Sep 2007
    Location
    USA
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    SystemLogic, I only did it with <p> tags because the test page (http://www.trimegatech.com/services/...ess/index2.php) you posted had it done with them. It will work with just about any element.

    As for the IE6 thing - xkratosx is right...it only pops up if the file is tested on your local machine. It should lay silent as soon as you upload the page to your server.


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
  •