Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

show hide multiple divs

Status
Not open for further replies.
MCasey

MCasey

Technical User
May 30, 2006
21
US
I'm trying to figure out how to change this code so that when someone clicks on a link for more information, all other divs are hidden. For example, if someone clicks on article 1's more information link...then click's on article 2's informaton link, I want the article1b div to automatically hide. Right now, the "close" link needs to be clicked on to hide it first. I like the close link, but is there a way this code can be changed so I can show one div and hide several others? (I'm just a beginner, so I might need thinks really explained.) Thank you!

Here is the code I have so far:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled Document</title>
<script type="text/javascript">
function show( id ) {
document.getElementById(id).style.display = 'block';
}
function hide( id ) {
document.getElementById(id).style.display = 'none';
}
</script>
<style>
<!-- may fine tune, move to external stylesheet -->
.hidden {display:none;}
.articlelink {text-decoration: underline}
</style></head>

<body>
<p>Article 1 copy
<div onclick="show('article1b'); hide('articlelink1')" class="articlelink" id="articlelink1">more info</div></p>
<div id="article1b" class="hidden">
<p>The rest of article 1</p>
<div onclick="hide('article1b'); show ('articlelink1')" class="articlelink">
<p>close</p>
<br>
<br>
</div></div>
<p>Article 2 copy
<div onclick="show('article2b'); hide('articlelink2')" class="articlelink" id="articlelink2">more info</div></p>
<div id="article2b" class="hidden">
<p>The rest of article 2</p>
<div onclick="hide('article2b'); show ('articlelink2')" class="articlelink">
<p>close</p>
<br>
<br>
</div></div>
<p>Article 3 copy
<div onclick="show('article3b'); hide('articlelink3')" class="articlelink" id="articlelink3">more info</div></p>
<div id="article3b" class="hidden">
<p>The rest of article 3 </p>
<div onclick="hide('article3b'); show ('articlelink3')" class="articlelink">close</div></div>

</body>
</html>
 
Sort by date Sort by votes
How about:
Code: 
function displaydiv(divid)
{
var onediv = document.getElementById(divid);
var divs = document.getElementsByTagName('div');
for (var di=0;di<divs.length;di++)
  {
  if (onediv != document.getElementById(divs[di]))
    {
    document.getElementById(divs[di]).style.display='none';
    }
  }

onediv.style.display = 'block';
}

Working example of something similar to this:


Lee
 
Upvote 0 Downvote
For similar projects, I had to create an array with the div name to loop through it. I had to do that because there were other positioning divs that I didn't want touched by the loop. It's an idea that will build on the excellent example provided above.
 
Upvote 0 Downvote
Thanks, the sample looks great. Hopefully, I can incorporate this. I don't think I have other divs that aren't involved, but I may be back to find out to create an array. Stay tuned...
 
Upvote 0 Downvote
The URL I provided uses a list of <div>s because of that problem. If the <div>s you want to show and hide start with the same character or character sequence that's different from your other <div>s, you can identify them that way while looping through the array in the example above.

Lee
 
Upvote 0 Downvote
I did put in the list of divs like you're suggesting. I feel like I'm on the right track, but I think one of the problems that I'm having is that in the sample you gave, the link were you click doesn't go away like I need it to. For example part of an article is listed, there's a click here for more info, and when that's clicked that link goes away and is replaced by the rest of the story. And then if the close article link or clicking on another link makes the link come back and rest of the story disappear.

I'm guessing it has to do with character sequence like you just mentioned, but that's over my head. Any help is appreciated.

Here's what I changed the code to...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled Document</title>
<script language="javascript">

var divs=['article1b', 'article2b', 'article3b','articlelink1', 'articlelink2', 'articlelink3'];

function displaydiv(divid)
{
var onediv = document.getElementById(divid);

for (var di=0;di<divs.length;di++)
{
if (onediv != document.getElementById(divs[di]))
{
document.getElementById(divs[di]).style.display='none';
}
}

if (onediv.style.display=='block')
{
onediv.style.display = 'none';
}
else
{
onediv.style.display = 'block';
}
}

</script></head>

<body>
<p>Article 1 copy
<div id="articlelink1"><a href="javascript:displaydiv('article1b');">Click here for more information</a></div></p>
<div id="article1b">
<p>The rest of article 1</p>
<a href="javascript:displaydiv('articlelink1');">Close article.</a></div>

<br>
<br>
<p>Article 2 copy
<div id="articlelink2"><a href="javascript:displaydiv('article2b');">Click here for more information</a></div></p>
<div id="article2b">
<p>The rest of article 2</p>
<a href="javascript:displaydiv('articlelink2');">Close article.</a></div>
<br>
<br>
</div></div>
<p>Article 3 copy
<div id="articlelink3"><a href="javascript:displaydiv('article3b');">Click here for more information</a></div></p>
<div id="article3b">
<p>The rest of article 3 </p>
<a href="javascript:displaydiv('articlelink3');">Close article.</a></div>

</body>
</html>
 
Upvote 0 Downvote
You want to hide or show blocks differently than what the code I provided does. That's just an example of how to hide and show blocks. Once you figure out the exact logic of what you want to hide and display when, you can modify that code to do what you want.

In the example I gave you, clicking on the link hides all the listed divs except the div associated with it, then either hides or displays that div based on the current display state.

You just need to rewrite it so it hides or displays based on the name of the div, not just hides all. You gotta do some of the work yourself unless you want to hire someone through Rent-a-Coder.

Lee
 
Upvote 0 Downvote
Thanks, I'll give it a whirl, but if anyone else has any examples that would be great. Thanks again for your help!

 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
359
Kennelbloke
Kennelbloke
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
332
xwb
xwb
chrisjchrisj
  • Locked
  • Question
Allow camera access - show camera view -- don’t start recording video
Replies
0
Views
89
chrisjchrisj
chrisjchrisj
keisha1
  • Locked
  • Question
How can I append/insert multiple text files into one .dbf file using java script /html command
Replies
1
Views
106
Samthyr
Samthyr
waubain
  • Locked
  • Question
First image in slide gallery not showing - Uncaught TypeError: slides[(slideIndex - 1)] is undefined 1
Replies
2
Views
214
waubain
waubain

Part and Inventory Search

Sponsor

Back
Top