/    Sign up×
Community /Pin to ProfileBookmark

hidden page /layer

Copy linkTweet thisAlerts:
Nov 12.2005

firstly hi, new here

I am after a tut or an idiots guide to doing a hidden layer or page dont now the proper name etc .

its where there is a link say ‘comments’ and when pressed it opens a hidden section underneath it that shows the comments and the input form etc
i would like it so i can have the option to show the info when they click a link rather than haveit all on show

hope this is enought info
cheer

to post a comment
JavaScript

10 Comments(s) ↴

Copy linkTweet thisAlerts:
@bokehNov 12.2005 — [code=php]<a href="#" onclick="document.getElementById('myDiv').style.display = ''; return false;">
Show myDiv
</a>
<br>
<div id="myDiv" style="display:none;">
myDiv content here
<br>
<a href="#" onclick="document.getElementById('myDiv').style.display = 'none'; return false;">
Close
</a>
</div>[/code]
Copy linkTweet thisAlerts:
@KorNov 14.2005 — You don't need an id for that:

[code=php]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
function showD(obj){
var nextS=obj.nextSibling;
while(nextS.nodeType!=1){nextS=nextS.nextSibling;}//Moz correction
nextS.style.display=(nextS.style.display=='none'||nextS.style.display=='')?'block':'none';
var txt = obj.firstChild.data;
txt =(txt.indexOf('show')>-1)?txt.replace(/show/,'hide'):txt.replace(/hide/,'show');
obj.firstChild.data=txt;
}
</script>
<style type="text/css">
<!--
.hid{
display:none;
}
-->
</style>
</head>
<body>
<span onclick="showD(this)">show div 1</span>
<div class="hid">DIV 1</div>
<br>
<span onclick="showD(this)">show div 2</span>
<div class="hid">DIV 2</div>
<br>
<span onclick="showD(this)">show div 3</span>
<div class="hid">DIV 3</div>
<br>
</body>
</html>
[/code]
Copy linkTweet thisAlerts:
@welshmanauthorNov 14.2005 — thank you both for these Kor with yours it doesnt alter my mouse pointer and so doesnt show a link when hover over, just the text pointer as if I want to selcted the text, any ideas how to??
Copy linkTweet thisAlerts:
@KorNov 14.2005 — <span onclick="showD(this)" style="cursor:pointer">show div 1</span>

or use an a tag, it does not matter

<a href="#" onclick="showD(this):return false">show div 1</a>
Copy linkTweet thisAlerts:
@welshmanauthorNov 14.2005 — cheers matey. thanks guys one more

could i put the following into a seperate page and import it in?

function showD(obj){

var nextS=obj.nextSibling;

while(nextS.nodeType!=1){nextS=nextS.nextSibling;}//Moz correction

nextS.style.display=(nextS.style.display=='none'||nextS.style.display=='')?'block':'none';

var txt = obj.firstChild.data;

txt =(txt.indexOf('show')>-1)?txt.replace(/show/,'hide'):txt.replace(/hide/,'show');

obj.firstChild

like i would css ect
Copy linkTweet thisAlerts:
@KorNov 14.2005 — yes. javascript codes may be written into external codes. put the code (except the marker tags <script> and </script>) into an external file, let's say myscript.js (or whichever extension you want) and call it in the HEAD of your page

<script type="text/javascript" src="myscript.js"></script>
Copy linkTweet thisAlerts:
@welshmanauthorNov 14.2005 — thanks thats what i thought, much appreciated.

thanks for the help
Copy linkTweet thisAlerts:
@bokehNov 14.2005 — You don't need an id for that:[/QUOTE]Maybe not but for some reason your method seems unnecessarily bulky.
Copy linkTweet thisAlerts:
@KorNov 14.2005 — I prefere dynamic methods all the time. The advantage is that you may use the code nomatter the HTML elements you used (just keeping a minimal structure), without writting God_knows_how_many id's on God_knows_how_many different pages. Keep it simple... yeah...
Copy linkTweet thisAlerts:
@bokehNov 14.2005 — I prefere dynamic methods all the time.[/QUOTE]I must say I agree. Javascript is pretty new to me so I write it in this very basic way but with PHP I always try to make everything I write dynamic and portable.
×

Success!

Help @welshman 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 6.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: @nearjob,
tipped: article
amount: 1000 SATS,

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

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...