HTML Toggle function

[nietodickens]

Hello! I'm trying to make a Toggle function work on a website to hide/show text after click, but it's working the other way around: it shows the text and when you click it hides it, I want for it to be hidden and then show it! Anyone has any suggestions?

Here's the link so you can see it, scroll to "All You Can Learn Pass" and see it:

http://www.vlany.org/index.php#event

And here's the code I have:

<script type="text/javascript">
function WM_toggle(id){
var x = document.getElementById(id);
var display = "";
if (x.style.display == "none") {
display = "";
} else {
display = "none";
}
x.style.display = display;
}
</script>

<h1><a href="#event" onClick="WM_toggle('eventAYCLP'); return true" >
VLA's All You Can Learn Pass</a>
</h1>
<dd id="eventAYCLP">
<? require("dropdownmenus/descriptions/descrip_ayclp.php"); ?>
</dd>
<tr id="eventAYCLP" style="display:none">
</tr><hr />


THANKS!!

L

 

[DHDdirect]

You are missing the semi-colon after the display:none

<tr id="eventAYCLP" style="display:none;">

Hope that helps

 

[nietodickens]

thanks for your response DHDdirect!

unfortunately it didn't work at all, don't know why, it seems that there's something that has to trigger the toggle function when the page uploads, but I have no idea how to! couldn't find it online anywhere.

I will keep trying to find something

thanks for the help!

 

[DHDdirect]

Can you provide the rest of the html code? Something doesn't look correct with the Javascript as well so it'll help if you can provide the whole picture. Either post it here or a link.

Try this and see if it helps:

<script type="text/javascript">
function WM_toggle(id){
var x = document.getElementById(id).style;
if (x.display == "none") {
x.display = "block";
} else {
x.display = "none";
}
}
</script>

 

[nietodickens]

DHD

here's the link to the website:

http://www.vlany.org/index.php

Scroll down to the title: "All You Can Learn Pass" to see it work the other way around how I wanted to work.

Let me know if you can see it.

Thanks!

 

[DHDdirect]

Of course.. because it's not the <tr> element you are trying to hide because there is nothing in it as it is. So you can move the style="display:none;" up to the <dd> element

<dd id="eventAYCLP" style="display:none;">

 

[nietodickens]

Awesome!

It worked like a charm! So simple yet so hard to notice for a novice in HTML like me. Thanks so much DHDdirect! You ROCK!

 

[PixelPusher]

I would use jquery, much less hassle. they have a .toggle(), .hide(), .show(), among many others. Good to see you got it working though.