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

show spans - all at once.. 1

Status
Not open for further replies.
sonicsnail

sonicsnail

Technical User
Nov 10, 2001
48
IN
The javascript below hides content below headings... when the heading his clicked the content below it becomes visable. I wish to be able to click ONE button/link and have ALL of the content <span>'s appear...

how should I modify this script to do so?

thanks in advance...

Pete
-----------------

<html>
<head>
<script language=&quot;JavaScript1.2&quot;>
<!--
var head=&quot;display:''&quot;
function doit(header){
var head=header.style
if (head.display==&quot;none&quot;)
head.display=&quot;&quot;
else
head.display=&quot;none&quot;
}
//-->
</script>
</head>

<body>

<H3 style=&quot;cursor:hand&quot; onclick=&quot;doit(document.all[this.sourceIndex+1])&quot;>YOUR HEADING HERE</H3>

<SPAN style=&quot;display: none&quot;>CONTENT HERE</SPAN>

<H3 style=&quot;cursor:hand&quot; onclick=&quot;doit(document.all[this.sourceIndex+1])&quot;>2342345</H3>

<SPAN style=&quot;display: none&quot;>2341234 CONTENT HERE</SPAN>

<H3 style=&quot;cursor:hand&quot; onclick=&quot;doit(document.all[this.sourceIndex+1])&quot;>asdfasdfasdf</H3>

<SPAN style=&quot;display: none&quot;>asdfasdfa CONTENT HERE</SPAN>
 
Sort by date Sort by votes
Hi Pete,

Try this:

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

<body>

<H3 style=&quot;cursor:hand&quot; onclick=&quot;doit()&quot;>YOUR HEADING HERE</H3>

<SPAN id=&quot;span1&quot; name=&quot;span1&quot; style=&quot;display: none&quot;>CONTENT HERE</SPAN>

<H3 style=&quot;cursor:hand&quot; onclick=&quot;doit()&quot;>2342345</H3>

<SPAN id=&quot;span2&quot; name=&quot;span2&quot; style=&quot;display: none&quot;>2341234 CONTENT HERE</SPAN>

<H3 style=&quot;cursor:hand&quot; onclick=&quot;doit()&quot;>asdfasdfasdf</H3>

<SPAN id=&quot;span3&quot; name=&quot;span3&quot; style=&quot;display: none&quot;>asdfasdfa CONTENT HERE</SPAN>


Hope this helps,
Erik
 
Upvote 0 Downvote
Thank you SOOO much.. thats brilliant.

I think I need to learn 2 new things today...

what this is for....

var imax=3
for(var i=1; i<=imax; i++)

and aslo how to use &quot;eval&quot;

thanks again. :)
 
Upvote 0 Downvote
Just a thought..

I want to use this script on lots of pages (so I'll include the external js file of course). However, different pages will need different numbers of <span>'s

should I change it to

function doit(totalnumber)
{
var imax=totalnumber

- - snip - - -

onclick doit(3)


is that ok? - seems to work alright but I'm guessing a little here..
 
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
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
936
xwb
xwb
markronz
  • Locked
  • Question
Javascript to edit all script tags 1
Replies
2
Views
359
feherke
feherke
chrisjchrisj
  • Locked
  • Question
Allow camera access - show camera view -- don’t start recording video
Replies
0
Views
256
chrisjchrisj
chrisjchrisj
CrxC01
  • Locked
  • Question
Sum of All Primes
Replies
0
Views
238
CrxC01
CrxC01

Part and Inventory Search

Sponsor

Back
Top