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

Need to do 2 things at once

Status
Not open for further replies.
buzzt

buzzt

Programmer
Oct 17, 2002
171
CA
Here is the script:
Code: 
<script language="javascript">
<!--
function showhide(item)
{
  if (item.style.display=='none')
  {
    item.style.display='';
  }
else
  {
    item.style.display='none'
  }
}
-->
</script>
I am using an onClick to activate the function (shown below). This displays the text that is otherwise hidden. I would like to have it also simultaneously close any previous text that may already be showing while displaying new text. Any ideas?

Code: 
<span id="q1" style="cursor:hand;" onClick="showhide(a1)">Question 1&nbsp;</span>
<span id="a1" style="display:'none'">Answer number 1 completed.</span>

 
Sort by date Sort by votes
Here, I put together a simple HTML file. You can utilize the functionality within it. Hope this helps.

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
     <title>Untitled</title>
     <script language="javascript">    
<!--
function hide(item) {
	item.style.display = 'none';
}

function showhide(item)
{
	var s;
	var o = document.getElementById(item);
	for (var i = 1; i < 4; i++) {
		s = document.getElementById('a' + i.toString());
		if (s.id != item) {
			hide(s);
		} else {
			if (o.style.display == 'none')
				o.style.display = 'inline';
			else
				o.style.display = 'none';
		}
	}
}

-->
</script>
</head>
<body>
<span id="q1" style="cursor:hand;" onClick="showhide('a1');">Question 1&nbsp;</span>
<span id="a1" style="display:'none'">Answer number 1 completed.</span>
<br><br>
<span id="q2" style="cursor:hand;" onClick="showhide('a2');">Question 2&nbsp;</span>
<span id="a2" style="display:'none'">Answer number 2 completed.</span>
<br><br>
<span id="q3" style="cursor:hand;" onClick="showhide('a3');">Question 3&nbsp;</span>
<span id="a3" style="display:'none'">Answer number 3 completed.</span>
</body>
</html>

*cLFlaVA
----------------------------
Breaking the habit...
 
Upvote 0 Downvote
My bad... I should have mentionned that I am using PHP to access the data from a flat file. Here is the existing code:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<script language="javascript">
<!--
function showhide(item)
{
  if (item.style.display=='none')
  {
    item.style.display='';
  }
else
  {
    item.style.display='none'
  }
}
-->
</script>


<?  
   $ques = file("ans.txt");
   $numq = count($ques);
   
   for ($i=0; $i<$numq; $i++)
   {
     $row = explode(";", $ques[$i]);
     
     echo "<span id=\"q".$i."\" style=\"cursor:hand;\" onClick=\"showhide(a".$i.")\">".$row[0]."&nbsp;</span>\n";
     echo "<span id=\"a".$i."\" style=\"display:'none'\">".$row[1]."</span>\n<br>\n";
     
   }  
?>

</body>
</html>

Does this help?

 
Upvote 0 Downvote

Does what help? The function would still be the same.

*cLFlaVA
----------------------------
Breaking the habit...
 
Upvote 0 Downvote
No, it seems to work on a static page, but not on the PHP page where values are called in from the flat file.
 
Upvote 0 Downvote
Line: 20
Char: 9
Error: object required
Code: 0
 
Upvote 0 Downvote
Put this:

[tt] $ques = file("ans.txt");
$numq = count($ques);[/tt]

At the very very top of the page.

Change this:

[tt] for (var i = 1; i < 4; i++) {[/tt]

To this:

[tt] for (var i = 0; i < <?= $numq; ?>; i++) {[/tt]


That should work. Let me know.


*cLFlaVA
----------------------------
Breaking the habit...
 
Upvote 0 Downvote
Try this:

Code: 
<head>
<script>
<!--
[b]var spans;

function collectSpans()
{
 spans = document.getElementsByTagName("SPAN");
}[/b]

function showhide(item)
{
  if (item.style.display=='none')
  {
    [b]for(var i=0; i<spans.length; i++)
     if(spans[i] != item)
      spans[i].style.display = 'none';
     else[/b]
      item.style.display='';
  }
else
  {
    item.style.display='none'
  }
}
-->
</script>
</head>
<body [b]onload='collectSpans();'[/b]>
...

I'm not sure how cross-browser compatible getElementsByTagName(...) is though.

--Dave
 
Upvote 0 Downvote
Dave-

That would hide the questions as well as the answers...

*cLFlaVA
----------------------------
Breaking the habit...
 
Upvote 0 Downvote
Sorry cLFlaVA, no go. I had to add 2 lines to get a value for the $numq in the js, but it still doesn't work. Here is the what the page source looks like. Anything seem to be missing?
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<script language="javascript">
<!--
function hide(item) {
    item.style.display = 'none';
}

function showhide(item)
{
    var s;
    var o = document.getElementById(item);
    for (var i = 0; i < 3; i++) {
        s = document.getElementById('a' + i.toString());
        if (s.id != item) {
            hide(s);
        } else {
            if (o.style.display == 'none')
                o.style.display = 'inline';
            else
                o.style.display = 'none';
        }
    }
}

-->

</script>


<span id="q0" style="cursor:hand;" onClick="showhide(a0)">Question 1&nbsp;</span>
<span id="a0" style="display:'none'">Answer number 1 completed.
</span>
<br>
<span id="q1" style="cursor:hand;" onClick="showhide(a1)">Question 2&nbsp;</span>
<span id="a1" style="display:'none'">Answer number 2 completed.
</span>
<br>
<span id="q2" style="cursor:hand;" onClick="showhide(a2)">Question 3&nbsp;</span>
<span id="a2" style="display:'none'">Answer number 3 completed.</span>
<br>

</body>
</html>
 
Upvote 0 Downvote

buzzt-

I apologize, I overlooked it the first time. The call to the function should look like this:

[tt]showhide([red]'[/red]a0[red]'[/red]);[/tt]

not

[tt]showhide(a0);[/tt]

*cLFlaVA
----------------------------
Breaking the habit...
 
Upvote 0 Downvote
No apology necessary... You just did me a great service. Works great! Thanks!
 
Upvote 0 Downvote
Oh... I must have zoned. Clearly I had no idea what the SPANs were, or even that it is a String being sent as a parameter. My bad.

Simple variation:

Code: 
    for(var i=0; i<spans.length; i++)
     if(spans[i][b].id[/b] != item [b]&& spans[i].id.indexOf("a") == 0)[/b])
      spans[i].style.display = 'none';
     else
      [b]spans[i][/b].style.display='';

...and, of course, my else-block needs to be updated to:

Code: 
  else
  {
    [b]document.getElementById("[/b]item[b]")[/b].style.display='none';
  }

My updated suggestion would then be:

Code: 
<head>
<script>
<!--
var spans;

function collectSpans()
{
 spans = document.getElementsByTagName("SPAN");
}

function showhide(item)
{
  if (item.style.display=='none')
  {
    for(var i=0; i<spans.length; i++)
     if(spans[i].id != item && spans[i].id.indexOf("a") == 0))
      spans[i].style.display = 'none';
     else
      spans[i].style.display='';
  }
  else
  {
    document.getElementById("item").style.display='none';
  }
}
-->
</script>
</head>
<body onload='collectSpans();'>
...

This solution does assume, however, that no other spans in the document, other than ones representing answers to questions, have an id beginning with the letter 'a'.

'sorry for the confusion!

--Dave
 
Upvote 0 Downvote


buzzt

One thing you should change about your script-

It's considered very good coding form to put JavaScript functions between the [tt]<head></head>[/tt] tags. I suggest you do so. Some browsers may give you issues otherwise.

*cLFlaVA
----------------------------
Breaking the habit...
 
Upvote 0 Downvote
I know. The reason for this is that this script only appears on 1 page in a very large site. All the head section has already been called in with PHP and since I do not want the code to appear in the head of every page, that is why I have opted to place it in the body.

Thanks for the advice though.
 
Upvote 0 Downvote
Understood. A workaround would be to place an if statement in the included file (if it's php) to test for the file name. If it's this one file name, include the javascript file...

Just a thought.

*cLFlaVA
----------------------------
Breaking the habit...
 
Upvote 0 Downvote
Good idea. I could use $_SERVER['PHP_SELF'] to get the page name and add the script if neccessary. I might do that.
 
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
lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
833
lexer
lexer
penguinspeaks
  • Locked
  • Question
How do I pass a classic asp variable to JS
Replies
1
Views
1K
xwb
xwb
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
955
xwb
xwb
Rayj0000
  • Locked
  • Question
How to disable an html button for subsequent website visitors?
Replies
0
Views
703
Rayj0000
Rayj0000

Part and Inventory Search

Sponsor

Back
Top