Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Mar 2009
    Location
    Milton Keynes, England
    Posts
    54
    Thanks
    4
    Thanked 4 Times in 4 Posts

    hide/unhide div, only 1 allowed open at a time

    Hi, I'm currently using some javascript to hide and unhide div's.

    I've been messing around and searching about trying to find something which will only allow one of the hidden div's open at a time. When a new link is clicked, the last div open closes. Unfortuanatly I haven't found anything yet, so I am wondering if anyone on this board can help please?

    The script I am using is:

    Code:
    <script type="text/javascript">
    function unhide(divID) {
      var item = document.getElementById(divID);
      if (item) {
        item.className=(item.className=='hidden')?'unhidden':'hidden';
      }
    }
    </script>
    
    <style type="text/css">
    .hidden {
    	display: none; 
    }
    
    .unhidden { 
    	display: block; 
    }
    </style>
    and the mark-up:

    Code:
    <p><a href="javascript:unhide('test1');">Testing 1</a></p>
    
    	<div id="test1" class="hidden">
    		<p>Testing :)</p>
    	</div>
    
    <p><a href="javascript:unhide('test2');">Testing 2</a></p>
    
    	<div id="test2" class="hidden">
    		<p>Testing again :)</p>
    	</div>
    I hope I have been clear, appreciate any help given.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Code:
    <script type="text/javascript">
    function unhide(divID) {
    var divs=document.getElementById('wrap').getElementsByTagName('div');
    for(var i=0;i<divs.length;i++)
    	divs[i].className='hidden';
    	
    var item = document.getElementById(divID);
    if (item) {
    	item.className=(item.className=='hidden')?'unhidden':'hidden';
    }
    }
    </script>
    Code:
    <div id="wrap">
    <p><a href="#" onclick="unhide('test1'); return false;">Testing 1</a></p>
    
    <div id="test1" class="hidden">
    <p>Testing :)</p>
    </div>
    
    <p><a href="#" onclick="unhide('test2'); return false;">Testing 2</a></p>
    
    <div id="test2" class="hidden">
    <p>Testing again :)</p>
    </div>
    </div>
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    nick1988 (03-13-2009)

  • #3
    New Coder
    Join Date
    Mar 2009
    Location
    Milton Keynes, England
    Posts
    54
    Thanks
    4
    Thanked 4 Times in 4 Posts
    Thanks abduraooft, I think I might be relying on you too much though.

  • #4
    New to the CF scene
    Join Date
    Aug 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This code works like a charm
    But a question, what do i have to change to make the text hide again when "re clicked"?

    thanks in advance!

  • #5
    New to the CF scene
    Join Date
    Aug 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    how stupid of me, had to add </div> after the
    "<p><a href="#" onclick="unhide('test1'); return false;">Testing 1</a></p>"

    tnx


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •