show/hide table rows using ONLY CSS

[phpgramma]

I have a form that has "Required" fields and "Optional" fields. Next to the "Optional" title, I want a button/link that shows or hides the fields when clicked. I don't really want to use Javascript (even though I already know how to do that!) because of how people are disabling Javascript and everything nowadays. So can this be done using only CSS, and if so, How?

sample code:

<table border="0">
  <tr><td>Required Information</td></tr>
  <tr><td>the required fields</td></tr>
  ...
  <tr><td>Optional Information <a href="#">show/hide</a></td></tr>
  <tr><td>hidden stuff</td></tr>
  ...
</table>

 

[cLFlaVA]

If you are asking if it is possible to change the style of an html element based on the value of a form field without javascript, then the answer is no, unless you submit the page so it reloads and have server-side code to apply a style to the element.

*cLFlaVA
----------------------------
[tt]Sigs cause cancer.[/tt]

 

[phpgramma]

well, check out this link: [URL unfurl="true"]http://stunicholls.myby.co.uk/book/[/url] That's the idea of what I want to do, but I want to hide tables instead. And this guy didn't use any javascript at all.

 

[taylorantone]

I say use Javascript. To hell with the people who browse without it.

Just keep it clean and keep it to a minimum.

 

[phpgramma]

alright then. I guess I agree with you taylorantone. I've been searching for hours for a css way to do it and couldn't find anything.

so how do I use the javascript so that if they browse without it, it'll just display the whole thing anyway?

 

[cLFlaVA]

One way:

Make both elements have the following style:

display: none;

Have the link do what you know how to do (set one to 'none', one to 'block'. In the body's onload event, set one of the element's display style to none.

This way, when the page renders, both will be displayed, but if JS is enabled, before the user even sees the 2nd element, it will be hidden by JS.

*cLFlaVA
----------------------------
[tt]Sigs cause cancer.[/tt]

 

[phpgramma]

awesome. thanks!

 

[dkdude]

Hi,

First - cool example you posted!! Never seen that done before!

Second - Like taylorantone I would go with JS.

Third - here's an example I wrote:

http://tek-tips.jit.dk/example001/

Regards


Jakob