Solved

Toggle multiple DIV items from one link - but not ALL divs

Posted on 2008-06-14
6
1,070 Views
Last Modified: 2013-11-19
Fabulously simple solution - but being a complete novice at scripting, I need to know how to alter the code in the solution so that only divs of a specific CSS class are hidden. For example I'd like to make use of this function in two different places on a single page without one affecting the other.

I'm assuming the fix is simple, but don't know the syntax.

thanks


I need help with the following
Sequence:
1) Detect all DIV items within a page
2) Create an array of the names (id's) of all DIV items collected
3) Test each name against the name passed into the function (div id argument)
4) If the name matches, show DIV, toggle all the rest

... oh, and I need to be able to do this with one click of a link :)
Here is my code. I am ready to strangle it. Please help:

<script language="javascript">

function divshowhide(divid){
   var alldivsonpage = document.getElementsByTagName('div');
   var divArray = alldivsonpage;
   var divnameArray = new Array();
   var dts = document.getElementById('divid');


      for(i=0;i<divArray.length;i++) {
             //next, for each div counted, get name of div
            //here is where i get into trouble
            divnameArray = "The name of each div element in divArray(i)";//how to access it?
      }

            
      for(x=0;i<divnameArray.length;x++) {
      
            if ( divnameArray(x) == dts )
                  dts.style.display = 'block';
                              
            } else {
                  document.getElementById(divnameArray(x)).style.display='none';
            
            }
            
      }
}


</script>

Links and divs:
<a href="javascript:;"onmousedown="divshowhide(idd);">layer one</a><br>
<div id="idd" style="display:none">
This is the first layer
</div>

Thanks in advance
0
Comment
Question by:dangerjames
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
6 Comments
 
LVL 82

Expert Comment

by:hielo
ID: 21787635
try this:
<script language="javascript"> 
function divshowhide(divid){
	var divArray = document.getElementsByTagName('div');
	for( var i=0; i < divArray.length; ++i)
	{
		divArray[i].style.display = (divArray[i].id==divid ? "" : "none"); 
	}
} 

</script> 
Links and divs:
<a href="javascript:;" onclick="divshowhide('idd');">layer one</a><br>
<div id="idd" style="display:none">
This is the first layer
</div>

Open in new window

0
 

Author Comment

by:dangerjames
ID: 21790081
Sorry - I don't think I was really clear.

the code in the example above wasn't mine - it was what was attached to the solution that seemed to put me on the right path, which is very similar to what you posted. Here's the original solution:

<script language="javascript">
function divshowhide(divid)
{
   var divArray = document.getElementsByTagName('div');
      for(i=0;i<divArray.length;i++)
      {
            if(divArray[i].id == divid)
      divArray[i].style.display = 'block';
      else
      divArray[i].style.display = 'none';
      }
}
</script>


But my problem differs in the following way - I have several small divs each containing text under a blank area on my page. Each bit of text is a link. When a link is clicked I'd like the corresponding div to appear in that blank area. So when a second link is clicked, the original one should disappear and the appropriate new one should appear. I have two such areas on the page - the divs that are to appear in each of the areas are assigned separate class names (ie  .pressdiv and .statementdiv)

All of the divs are nested in a simple 3 column table -so what's happening with the code shown above is that when any link using the showhide function is clicked everything disappears except the background wallpaper. Whoosh.

I assume that this means that my Array isn't defined specifically enough. But then that's where I need the help.

Thanks - I appreciate the quick response!


0
 
LVL 18

Expert Comment

by:Matthew Kelly
ID: 21790460
It would help if you could post the HTML with the div's
0
PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

 

Author Comment

by:dangerjames
ID: 21790659
Here is the code from the body of the page (sorry I couldn't include it before - working on different machines without access between them most of the weekend).



</td>
<td class="tdmid" align="center" width="680" height="600">
		<div style="position:relative;width:680px;height:700px;margin:auto;-adbe-g:m;">
			border="0" /></div>		//followed by several divs with small images, etc.
 
							//the following 3 divs are containers for individual text based links
		
		<div class="swapLinkdiv" style="position:absolute;top:571px;left:363px;width:120px;height:16px;-adbe-c:c">
			<a href="javascript:;" onclick="divshowhide('commissions');">Recent Commissions</a></div>
		<div class="swapLinkdiv" style="position:absolute;top:571px;left:517px;width:100px;height:16px;-adbe-c:c">
			<a href="javascript:;" onclick="divshowhide('grants');">Grants &amp; Awards</a></div>
		<div class="swapLinkdiv" style="position:absolute;top:592px;left:391px;width:212px;height:16px;-adbe-c:c">
			<a href="javascript:;" onclick="divshowhide('quotes');">just a few cool quotes from the press</a></div>
		
 
		<div id="quotes" class="pressdiv" style="position:absolute;top:125px;left:360px;width:306px;height:429px;-adbe-c:c">
			<h5>Quotes</h5>
			<br /> //  blah blah blah  all the text that should show when the quotes divshowhide link is clicked
 
		</div>
 
		<div id="grants" class="pressdiv" style="position:absolute;top:125px;left:360px;width:306px;height:437px;-adbe-c:c">
			<h5>Grants and Awards</h5>
			<br />//  blah blah blah  all the text that should show when the grants divshowhide link is clicked
			
		</div>
								
<div id="commissions" class="pressdiv" style="position:absolute;top:125px;left:360px;width:306px;height:437px; -adbe-c:c">
			<h5>Commissions</h5>
			<br />/>//  blah blah blah  all the text that should show when the commissions divshowhide link is clicked
			
		</div>
</td>

Open in new window

0
 
LVL 18

Accepted Solution

by:
Matthew Kelly earned 50 total points
ID: 21790744
Try this code
<html>
<head>
<script language="javascript">
 
function divshowhide(divid)
{
	var alldivsonpage = document.getElementsByTagName('div');	
            
	for(x=0;x<alldivsonpage.length;x++) 
	{
		if ( alldivsonpage[x].className == "pressdiv" )
		{      
			if ( alldivsonpage[x].id == divid ) 
			{
				document.getElementById(alldivsonpage[x].id).style.display = 'block';
			} 
			else 
			{
				document.getElementById(alldivsonpage[x].id).style.display='none';
			}
		}
            
	}
}
</script>
</head>
<body onload="divshowhide('commissions')">
<div style="position:relative;width:680px;height:700px;margin:auto;"></div>
                
                <div class="swapLinkdiv" onclick="divshowhide('commissions');" style="font-style:underline;color:blue;cursor:hand;cursor:pointer;position:absolute;top:571px;left:363px;width:120px;height:16px;">
                        Recent Commissions</div>
                <div class="swapLinkdiv" onclick="divshowhide('grants');" style="font-style:underline;color:blue;cursor:hand;cursor:pointer;position:absolute;top:571px;left:517px;width:100px;height:16px;">
                        Grants &amp; Awards</div>
                <div class="swapLinkdiv" onclick="divshowhide('quotes');" style="font-style:underline;color:blue;cursor:hand;cursor:pointer;position:absolute;top:592px;left:691px;width:212px;height:16px;">
                        just a few cool quotes from the press</div>
                
 
                <div id="quotes" class="pressdiv" style="position:absolute;top:125px;left:360px;width:306px;height:429px;">
                        <h5>Quotes</h5>
                        <br /> blah blah blah  all the text that should show when the quotes divshowhide link is clicked
 
                </div>
 
                <div id="grants" class="pressdiv" style="position:absolute;top:125px;left:360px;width:306px;height:437px;">
                        <h5>Grants and Awards</h5>
                        <br />blah blah blah  all the text that should show when the grants divshowhide link is clicked
                        
                </div>
                                                                
		<div id="commissions" class="pressdiv" style="position:absolute;top:125px;left:360px;width:306px;height:437px;">
                        <h5>Commissions</h5>
                        <br />blah blah blah  all the text that should show when the commissions divshowhide link is clicked
                        
                </div>
</body>
</html>

Open in new window

0
 

Author Closing Comment

by:dangerjames
ID: 31467301
absolutely perfect (and I was very close to the solution on my own, but would not have gotten the syntax right).

thanks!
0

Featured Post

Forrester Webinar: xMatters Delivers 261% ROI

Guest speaker Dean Davison, Forrester Principal Consultant, explains how a Fortune 500 communication company using xMatters found these results: Achieved a 261% ROI, Experienced $753,280 in net present value benefits over 3 years and Reduced MTTR by 91% for tier 1 incidents.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
PDF Turn Look 7 33
Add Rows on a Table 8 50
Copy files and run psex to windows 7 only 14 44
How can I use javascript variable in mysql query 21 37
This article is meant to give a basic understanding of how to use R Sweave as a way to merge LaTeX and R code seamlessly into one presentable document.
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
In a recent question (https://www.experts-exchange.com/questions/29004105/Run-AutoHotkey-script-directly-from-Notepad.html) here at Experts Exchange, a member asked how to run an AutoHotkey script (.AHK) directly from Notepad++ (aka NPP). This video…

737 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question