Sign In | Register Now About Bytes | Help | Site Map
Connecting Tech Pros Worldwide

Show/Hide div

Question posted by: shapper (Guest) on June 27th, 2008 07:16 PM
Hello,

In a simple HTML page, index.html, I have:
- 3 anchors: A, B and C;
- 3 divs: dA, dB and dC;

Each anchor should load, when clicked, index.html but anchor A should
make dA visible and the other invisible, anchor B should show dB and
hide the others.

How can I do this?

Thanks,
Miguel
BRitchie's Avatar
BRitchie
Guest
n/a Posts
June 27th, 2008
07:16 PM
#2

Re: Show/Hide div
On Jun 3, 5:15*pm, shapper <mdmo...@gmail.comwrote:
Quote:
Hello,
>
In a simple HTML page, index.html, I have:
- 3 anchors: A, B and C;
- 3 divs: dA, dB and dC;
>
Each anchor should load, when clicked, index.html but anchor A should
make dA visible and the other invisible, anchor B should show dB and
hide the others.
>
How can I do this?
>
Thanks,
Miguel


This was tested very quickly but works in IE 7.

It uses Javascript but you didn't specify a scripting language of
choice.

<code>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Dynamic Java Querystring</title>
</head>
<body>
<script type="text/javascript">
<!--
function querySt(param) {
var loc = window.location.search.substring(1);
var query = loc.split("&");
for (i=0;i<query.length;i++) {
var currParam = query[i].split("=");
if (currParam[0] == param) {
return currParam[1];
}
}
}
-->
</script>
<a href="test.htm?q=Da">A</a>
<a href="test.htm?q=Db">B</a>
<a href="test.htm?q=Dc">C</a>
<div id="Da" style="visibility: hidden;">
<p>Div A</p>
</div>
<div id="Db" style="visibility: hidden;">
<p>Div B</p>
</div>
<div id="Dc" style="visibility: hidden;">
<p>Div C</p>
</div>
<script type="text/javascript">
<!--
document.getElementById(querySt('q')).style.visibi lity = 'visible';
-->
</script>
</body>
</html>
</code>

RobG's Avatar
RobG
Guest
n/a Posts
June 27th, 2008
07:16 PM
#3

Re: Show/Hide div
On Jun 21, 12:55*pm, BRitchie <ritchie.br...@gmail.comwrote:
Quote:
On Jun 3, 5:15*pm, shapper <mdmo...@gmail.comwrote:
>
Quote:
Hello,

>
Quote:
In a simple HTML page, index.html, I have:
- 3 anchors: A, B and C;
- 3 divs: dA, dB and dC;

>
Quote:
Each anchor should load, when clicked, index.html but anchor A should
make dA visible and the other invisible, anchor B should show dB and
hide the others.

>
Quote:
How can I do this?

>
Quote:
Thanks,
Miguel

>
This was tested very quickly but works in IE 7.
>
It uses Javascript but you didn't specify a scripting language of
choice.
>
<code>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Dynamic Java Querystring</title>
</head>
<body>
<script type="text/javascript">
<!--


HTML-style comment delimiters should not be used inside script
elements.

Quote:
* * * * function querySt(param) {
* * * * * * * * var loc = window.location.search.substring(1);
* * * * * * * * var query = loc.split("&");
* * * * * * * * for (i=0;i<query.length;i++) {
* * * * * * * * * * * * var currParam = query[i].split("=");
* * * * * * * * * * * * if (currParam[0] == param) {
* * * * * * * * * * * * return currParam[1];
* * * * * * * * * * * * }
* * * * * * * * }
* * * * }
-->


That is incorrect even if the comment delimiters were useful, it
should be:

//-->

Quote:
</script>
<a href="test.htm?q=Da">A</a>
<a href="test.htm?q=Db">B</a>
<a href="test.htm?q=Dc">C</a>
<div id="Da" style="visibility: hidden;">
<p>Div A</p>
</div>
<div id="Db" style="visibility: hidden;">
<p>Div B</p>
</div>
<div id="Dc" style="visibility: hidden;">
<p>Div C</p>
</div>
<script type="text/javascript">
<!--
* * * * document.getElementById(querySt('q')).style.visibi lity = 'visible';
-->


The problem with this approach is that if the user has scripting
disabled, or it isn't supported, they will not see any content. Much
better to use the HTML class attribute to associate visibility, then
use script to load the relevant style sheet to set the applicable rule
and hide the elements.


--
Rob

 
Not the answer you were looking for? Post your question . . .
190,062 Experts ready to help you find a solution.
Sign up for a free account, or Login (if you're already a member).

Latest Articles: Read & Comment
  • Didn't find the answer you were looking for?
    Post Your Question
  • Top Community Contributors