/    Sign up×
Community /Pin to ProfileBookmark

A Link that displays a table when clicked..using Javascript?

Wow, I haven’t posted here in ages.
Last i recall, it was about a music script. I heartily thank again everyone who helped me with it. It still has some problems, but it’s basically done.

Anyway, i have another question.
I think we’ve all seen sites where they have some text that when clicked, drops a box underneath it displaying info.

Most commonly found in FAQ pages.
It’s vague, but i’ll try to elaborate.
There is a question that can be clicked on like a link, but instead of bringing you elsewhere, when you click it, a box appears under it, between the current question and the next one, and in it displays text (or another page?).

for reference, The Microsoft Windows Update Troubleshooter is an excellent example.
[url]http://v4.windowsupdate.microsoft.com/troubleshoot/[/url]

I’m assuming that uses Javascript, and I’d like to mimic it.
The only troubles are, I don’t know what this type of code is called, so I cannot look for it. Any pointers on this would help.
If anyone can either give me the code to do this, or explain to me how it works, it’d be great, because I really like how it looks.

Note: with how it works, is the box that drops down another table cell (in which case I assume i’m limited in terms of HTML to put in there?) or can i dump a whole new html page in there?
(the second is preferred, because i think telling that box to load another document is easier to edit..)

If you need any more info, just ask, i’ll try to see what i can come up with..
Thanks everyone~

to post a comment
JavaScript

3 Comments(s)

Copy linkTweet thisAlerts:
@TageJun 13.2004 — Some people refer to this kind of javascript as DHTML

Might look like this[code=php]<html>
<head>
<title>Show/Hide</title>
<script type="text/javascript">
<!--
function showHideDiv(what){
document.getElementById(what).style.display=document.getElementById(what).style.display=="none"?"block":"none"}
//-->
</script>
</head>
<body>
<div id="theDiv">
BlahBlahBlah
</div>
<button onClick="showHideDiv('theDiv')">Show / Hide Div</button>
</body>
</html>[/code]
Tage
Copy linkTweet thisAlerts:
@DarkScytheauthorJun 13.2004 — hmm..

I'm looking at it, but I'm not getting what the code means..

I've tested it in dreamweaver and it works, but from the code tiself, I'm not sure how to read it, so I dunno if i can modify it that easily..

Also, you have a button. Is there a way to make it text/link instead of the button?

Maybe <a href="#" onClick="showHideDiv('theDiv')">Stuff</a> ?

I've not tried my own suggestion yet, but I'm curious as to how this works.. and of course, if there could be a name for this type of script so I can research it a bit.

Thanks again
Copy linkTweet thisAlerts:
@TageJun 13.2004 — The ? and : is a [url=http://www.w3schools.com/js/js_conditionals.asp]conditional operator[/url]. It's basically an if-else statement. [url=http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/display.asp]style.display[/url] is basically CSS, altered by JavaScript. document.getElementById() gets the element to alter from an id. Using a link like you asked will work just as well. I'll go through what it does.

This gets the element of what's value and is going to make its display equal something, that something is found below

document.getElementById(what).style.display=

This is the conditional operator. I set it to check if the display of the element equals "none". If it does, I guess you could say it returns the value of "block". If it does NOT, it returns the value of "none". When the page first loads, the display value equals nothing because "style" will only get what has been altered by javascript itself. Therefore, it will end up false and return "none" effectively hiding whatever element you told it to. When you click it again, display's value is now "none" so it will be true and return "block" effectively showing the element again.

document.getElementById(what).style.display=="none"?"block":"none"

I'm not a tutorial-maker, sorry if my explanation was confusing. Hope this helps. Later

Tage
×

Success!

Help @DarkScythe 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.20,
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,
)...