JavaScript Forum

**CIA** · 09-16-2009, 06:40 PM

Hi
I have created a web page with a Show/Hide function on it. The problem is that when I go to the page all the information is showing, but i'd like all the information hidden by default.

You can find my page Here. Clicking on the artists name shows/hides the content.

If you need anymore info please let me know. Hope someone can help and many thanks for your time

**wayfarer07** · 09-16-2009, 06:53 PM

In order to allow it to degrade to a useful table if JavaScript is disabled, I suggest you do this:

Right before the after <body> tag:

HTML Code:

<body>
<script type="text/javascript">
document.body.className="js-enabled";
</script>

Now, in your CSS document, do something like this:

Code:

.js-enabled table.list tr.sel {
display: none;
}

That's it! All your script is doing is changing the inline style of your tr with a class of "sel" to display: none" and then removing any display to make it visible again.