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 3 of 3
  1. #1
    New Coder
    Join Date
    May 2010
    Posts
    79
    Thanks
    15
    Thanked 2 Times in 2 Posts

    Hide/Show the following DIV if clicked?

    I know that this can be done using .hide/.show... I don't know how to say this but if you'll look at the code:
    Code:
    <div id="isclickable">
    klasdlkasdklaklsjd
    <div id="weeeee">
    trolololololol
    </div>
    </div>
    <div id="isclickable">
    klasdlkasdklaklsjd
    <div id="weeeee">
    trolololololol
    </div>
    </div>
    The div having an id of "weeeee" will show if id="isclickable" is clicked.. but not all divs having "weeeee" should show but instead what is inside the div "isclickable" is there a way to attain this without creating multiple scripts and ids?

    Thanks>

  • #2
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,762
    Thanks
    19
    Thanked 155 Times in 146 Posts
    something like the following:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    	<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
    	<title>TITLE</title>
    </head>
    <body>
    
    <div id="containerDiv">
    	<div id="isclickable1" class="isclickable">
    		klasdlkasdklaklsjd
    		<div id="weeeee1" class="weeeee" style="display:none">
    			trolololololol
    		</div>
    	</div>
    
    	<div id="isclickable2" class="isclickable">
    		klasdlkasdklaklsjd
    		<div id="weeeee2" class="weeeee" style="display:none">
    			trolololololol
    		</div>
    	</div>
    </div>
    
    <script type="text/javascript">
    	function attachToggleDivHandler(divObj)
    	{
    		divObj.onclick = function()
    		{
    			var isclickableDivs = this.getElementsByTagName('div');
    			for (var j=0; j<isclickableDivs.length; j++)
    			{
    				if (isclickableDivs[j].className == "weeeee")
    				{
    					isclickableDivs[j].style.display = (isclickableDivs[j].style.display == "block") ? "none" : "block";
    				}
    			}
    		};
    	}
    
    	window.onload = function()
    	{
    		var containerDivDivs = document.getElementById('containerDiv').getElementsByTagName('div');
    		for (var i=0; i<containerDivDivs.length; i++)
    		{
    			if (containerDivDivs[i].className == "isclickable")
    			{
    				attachToggleDivHandler(containerDivDivs[i]);
    			}
    		}
    	};
    </script>
    
    </body>
    </html>
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • Users who have thanked chump2877 for this post:

    kenshn111 (12-28-2011)

  • #3
    New Coder
    Join Date
    May 2010
    Posts
    79
    Thanks
    15
    Thanked 2 Times in 2 Posts
    Thank you very much!!


  •  

    Posting Permissions

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