|
Toggle Show/hide
Link |
by
on 2006-03-30 20:33:09 |
|
i'm creating a website for my group project and we want to use the show/hide toggle...my friend manage to create the script...but by default,it'll show all unless i click 'A' to hide them.here's how the javascript and body looks like looks like... < script type="text/javascript" > < !-- function toggle_visibility(id) { var e = document.getElementById(id); if(e.style.display == 'none') e.style.display = 'block'; else e.style.display = 'none'; } //-- > < /script > < body > < a href="#" onclick="toggle_visibility('A');" > A < /a > < div id="A" > This is line 1 This is line 2 < /div > ive also tried < div id="A" style="visibility: hidden" > for the div but that didn't work... is there anything else i need to add so that by default,the body is hidden and will only be shown when i click on 'A'? |
|
Re: Toggle Show/hide
Link |
by
on 2006-03-30 20:54:12 (edited 2006-03-30 21:16:24)
|
|
--- EXAMPLE --- --- CODE --- <script type="text/javascript">
function toggle_visibility(id)
{
var e = document.getElementById(id);
if(e.style.display == 'none')
e.style.display = 'block';
else
e.style.display = 'none';
}
</script>
<a href="#" onclick="toggle_visibility('A');">toggle A</a><br /><br />
<div id="A" style="display: none;">
This is line 1<br />
This is line 2
</div>
|
|
Re: Toggle Show/hide
Link |
by
on 2006-03-30 21:14:16 |
|
hmm...the toggle function works... but is there a way to make the lines: This is line 1 This is line 2, hidden when the page is loaded?we've been scratching our heads since yesterday lol |
|
Re: Toggle Show/hide
Link |
by
on 2006-03-30 21:17:44 |
|
oh! i see, you want it hidden when the page loads. for that, you use the style="" attribute. with that you can set the CSS display to 'none'. i edited my last post, so you can see the example and code.
|
|
Re: Toggle Show/hide
Link |
by
on 2006-03-30 21:24:14 |
|
alright!it works!thanks alot gendou^^ |