/    Sign up×
Community /Pin to ProfileBookmark

How to show/hide layer off same link?

Copy linkTweet thisAlerts:
Nov 15.2004

I found a javascript snippit to use and based on that have figured out how to show a hidden layer off a link, and how to close it off another. My problem is I don’t know how to alter it in order for the layer to be showen and close off of the SAME link similar to this: [URL=http://www.microsoft.com/office/project/prodinfo/faq.mspx#EEAAA]Same Link Show/Hide[/URL] I am guess I need part of the script to check the current status of the div, but I am not sure how to do that.

So my current script is:

<script type=”text/javascript”>
<!–
function toggleAnswer(szDivID, iState) // 1 visible, 0 hidden
{
if(document.layers) //NN4+
{
document.layers[szDivID].visibility = iState ? “show” : “hide”;
}
else if(document.getElementById) //gecko(NN6) + IE 5+
{
var obj = document.getElementById(szDivID);
obj.style.visibility = iState ? “visible” : “hidden”;
}
else if(document.all) // IE 4
{
document.all[szDivID].style.visibility = iState ? “visible” : “hidden”;
}
}
// –>

And my code is:

<div class=”faq”>
<a href=”javascript:;”onMouseDown=”toggleAnswer(‘A1’,1)”>Question?</a></div>
<div id=”A1″ class=”faqbody”>Answer.</div>

The class “faqbody” has the attribute: “visibility:hidden;”

to post a comment
JavaScript

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@CharlesNov 15.2004 — [font=monospace]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<meta name="Content-Script-Type" content="text/javascript">

<meta name="Content-Style-Type" content="text/css">

<title>Example</title>

<style type="text/css">

<!--

.hidden {display:none}

.shown {dosplay:block}

-->

</style>

</head>

<body>

<script type="text/javascript">

<!--

document.write ('<p id="toggle">Hide</p>');

document.getElementById('toggle').onclick = function () {if (this.firstChild.data == 'Show') {this.firstChild.data = 'Hide'; document.getElementById('toggled').className = 'shown'} else {this.firstChild.data = 'Show'; document.getElementById('toggled').className = 'hidden'}}

onload = function () {document.getElementById('toggle').onclick()}

// -->

</script>

<p id="toggled">Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. </p>

</body>

</html>[/font]
Copy linkTweet thisAlerts:
@niemieauthorNov 15.2004 — Thanks for the reply!

That works in my broswer - my question now is how can I convert the "show" and "hide" text to a link that is the same. So in other words, for example a text link reading "link" that toggles the paragraph on and off.
Copy linkTweet thisAlerts:
@CharlesNov 15.2004 — [font=monospace]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<meta name="Content-Script-Type" content="text/javascript">

<meta name="Content-Style-Type" content="text/css">

<title>Example</title>

<style type="text/css">

<!--

.hidden {display:none}

.shown {dosplay:block}

-->

</style>

</head>

<body>

<script type="text/javascript">

<!--

document.write ('<p id="toggle">Link</p>');

document.getElementById('toggle').onclick = function () {document.getElementById ('toggled').className = document.getElementById ('toggled').className == 'shown' ? 'hidden' : 'shown'}

onload = function () {document.getElementById('toggle').onclick()}

// -->

</script>

<p class ="shown" id="toggled">Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. </p>

</body>

</html>[/font]
Copy linkTweet thisAlerts:
@niemieauthorNov 15.2004 — Hmmm - what I meant was, the active word (in this case "link") is plain text instead of a hyperlink....
Copy linkTweet thisAlerts:
@CharlesNov 15.2004 — [i]Originally posted by niemie [/i]

[B]Hmmm - what I meant was, the active word (in this case "link") is plain text instead of a hyperlink.... [/B][/QUOTE] In what way is that different from what I have shown?
Copy linkTweet thisAlerts:
@niemieauthorNov 15.2004 — Because I want the text that toggles the hidden layer to be hyperlink and I am trying to figure out how to do that from the solution you provided.

So, in your code you have:

document.write ('<p id="toggle">Link</p>');

Which is plain text as the word Link is not a link. Not sure what type of anchor tag to put around it to make it not go anywhere but still toggle. Is there a generic anchor tag?
Copy linkTweet thisAlerts:
@CharlesNov 15.2004 — [i]Originally posted by niemie [/i]

[B]Because I want the text that toggles the hidden layer to be hyperlink and I am trying to figure out how to do that from the solution you provided.



So, in your code you have:



document.write ('<p id="toggle">Link</p>');



Which is plain text as the word Link is not a link. Not sure what type of anchor tag to put around it to make it not go anywhere but still toggle. Is there a generic anchor tag? [/B][/QUOTE] If it deosn't go any where then it isn't a hyperlink. If you want it to look like a link then change its style.
Copy linkTweet thisAlerts:
@niemieauthorNov 15.2004 — I guess that is the issue than - how do I change the style in CSS to make it behave like the links in my current style sheet (so it has hover, active, etc).

My current link styles:

a:link {


color: #DD5135;

text-decoration: none;

font-size: 12px

}

a:visited {


color: #DD5135;

text-decoration: none;

font-size: 12px

}

a:active {


color: #DD5135;

text-decoration: none;

font-size: 12px

}

a:hover {


color: #DD5135;

text-decoration: underline;

font-size: 12px

}
×

Success!

Help @niemie spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...