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 Chriss Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Reference all divs on a page 2

Status
Not open for further replies.
hads

hads

Technical User
Nov 12, 2001
257
AU
Hi all,

I'm pretty average when it comes to javascript so bear with me if you will.

I have a number of divs on a page that show their content when a heading is clicked, I pretty much have this under control, but I am trying to get all of the other divs to hide when one is shown (kinda like some of the compiled help files' effect - sort of).

What I want to know is; if there is a way to refer to all the divs on a page in a script, or any other better solutions that you may have.

Any suggestions would be appreciated.

Cheers

hads.
 
Sort by date Sort by votes
I had somewhere an example here:

<script language=&quot;JavaScript&quot;>
function doit()
{
var imax=3
for(var i=1; i<=imax; i++)
{
var head= eval(&quot;document.all.div&quot; +i+ &quot;.style&quot; );
if (head.display==&quot;none&quot;)
{
head.display=&quot;&quot;;
}
else
{
head.display=&quot;none&quot;;
}
}
}
</script>

<html>
<head>
</head>

<body>

<H3 style=&quot;cursor:hand&quot; onclick=&quot;doit()&quot;>YOUR HEADING HERE</H3>
<div id=&quot;div1&quot; name=&quot;div1&quot; style=&quot;display: none&quot;>CONTENT HERE</div>
<H3 style=&quot;cursor:hand&quot; onclick=&quot;doit()&quot;>2342345</H3>
<div id=&quot;div2&quot; name=&quot;div2&quot; style=&quot;display: none&quot;>2341234 CONTENT HERE</div>
<H3 style=&quot;cursor:hand&quot; onclick=&quot;doit()&quot;>asdfasdfasdf</H3>
<div id=&quot;div3&quot; name=&quot;div3&quot; style=&quot;display: none&quot;>asdfasdfa CONTENT HERE</div>

<A href=&quot;javascript:doit();&quot;>SHOW / HIDE ALL</A><br>
</body>
</html>

Hope this helps,
Erik <!-- My sport: Boomerang throwing !!
This year I will participate at the World Championships in Germany. (!! Many Happy Returns !! -->
 
Upvote 0 Downvote
Cheers for that,

I didn't think there would be a way to reference all of them at once, but this does help me with an example of a for loop.

Thanks again

hads
 
Upvote 0 Downvote
well there is a way of references all of them but this only works with NS6 and other standard compliant browsers. Only the latests of IE's will be able to do this.

function showOnly(idOfDivToShow)
{
var allMyDivs = document.getElementsByTagName(&quot;DIV&quot;);

// hide all the divs
for (var i = 0; i < allMyDivs.length; i++)
{
allMyDivs.style.display = &quot;none&quot;;
}

// show the one you want.
document.getElementById(idOfDivToShow).style.display = &quot;block&quot;
}

the way you would make this function work is by calling showOnly(idOfDiv) like this :

<style>
div { display:none; }
</style>

<div id=one>One</div>
<div id=two>Two</div>
<div id=three>Three</div>

<script>
showOnly('one') // only the first will appear.
</script>

I hope this helps. Gary Haran
 
Upvote 0 Downvote
Hi xutopia,

I think this is the 3th time I notice that a posts of you ends whit a lot of Italic text.

This happens becease tek-tips use TGML (TGML stands for Tecumseh Group Markup Language. TGML is proprietary to these forums and allows you to format your posts, enabling bolding, italicizing, and so on, as well as typing in color and changing your text alignment (center, right alignment).

And because you use [ignore][/ignore] in your line allMyDivs[ignore][/ignore].style.display = &quot;none&quot;; that's the the starting point of the italic text.

so you have to use the [ ignore][ /ignore] TGML's (without the space after the &quot;[&quot;, but there is no other way to show LOL)

so type:
allMyDivs[ ignore][ignore][/ignore][ /ignore].style.display = &quot;none&quot;;
to display:
allMyDivs[ignore][/ignore].style.display = &quot;none&quot;;

See further details at the link &quot;Process TGML&quot; on the right-bottom of the reply-area of this post.

Erik <!-- My sport: Boomerang throwing !!
This year I will participate at the World Championships in Germany. (!! Many Happy Returns !! -->
 
Upvote 0 Downvote
Groovy!

Thanks for that xutopia, thats pretty much exactly what I was thinking about to start with. Really helpful to know.

Cheers to Boomerang to for pointing out the TGML bit - I was wondering what happened to that bit.

hads.

P.S Boomerang, where are you from to be into boomerangs?
 
Upvote 0 Downvote
Hi hads,

I'm from the Netherlands. A windy country, so not to much days left to throw in perfect conditions (wind-force 1 or 2)

There are not much real sports throwers around the world (I think about 1500 maximum)
But it's a lot of fun when we meat at tournaments in Europe.

Erik <!-- My sport: Boomerang throwing !!
This year I will participate at the World Championships in Germany. (!! Many Happy Returns !! -->
 
Upvote 0 Downvote
I had noticed it as well and didn't pay much attention to it. I will make sure I either put ignore or not process the tgml altogether! :) Thanks boomerang.

So here is the corrected version with the where it is suppposed to be :

function showOnly(idOfDivToShow)
{
var allMyDivs = document.getElementsByTagName(&quot;DIV&quot;);

// hide all the divs
for (var i = 0; i < allMyDivs.length; i++)
{
allMyDivs.style.display = &quot;none&quot;;
}

// show the one you want.
document.getElementById(idOfDivToShow).style.display = &quot;block&quot;
}

the way you would make this function work is by calling showOnly(idOfDiv) like this :

<style>
div { display:none; }
</style>

<div id=one>One</div>
<div id=two>Two</div>
<div id=three>Three</div>

<script>
showOnly('one') // only the first will appear.
</script>
Gary Haran
 
Upvote 0 Downvote
Cool, just wondering as I'm from Australia where boomerangs are probably more popular than a lot of other places.

Have a good one!
 
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
1K
Kennelbloke
Kennelbloke
Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
2K
Mike Lewis
Mike Lewis
rogerte
  • Locked
  • Question
Code that works on Windows, Android and Iphone
Replies
0
Views
731
rogerte
rogerte
JScannell
  • Locked
  • Question
Javascript issue on iPhone/iMac platforms
Replies
0
Views
776
JScannell
JScannell
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
815
malpa
malpa

Part and Inventory Search

Sponsor

Back
Top