Is there a way to dynamically change content without javascript?

Question

I am building out a page for work that has a section where the content needs to change dynamically on button(s) click. I know of several different ways to accomplish this but all of them involve javascript of some kind or another. My capabilities don't currently include writing script for this site so I am researching to see if there is a way to do this with JUST css before I inform my project manager that one of our javascript guys will have to handle it. So, anyone know of any cool CSS techniques that might get the desired effect?

Answer 1

You could potentially use CSS's :target pseudo-class selector. This would require replacing your buttons with a elements instead, which cause your document's URL to apply a hash relating to the id attribute of the element you want to change.

div {
  display: none;
}

:target {
  display: block;
}

<a href="#foo">Click here to show the hidden <code>div</code> element</a><br>
<a href="#">Click here to hide it again</a>.
<div id="foo">This should only show when the link is clicked.</div>

Answer 2

Yes, you can use dynamic content without any scripting language, but your options are very limited. As James suggested, you use CSS. One common way is to use checkboxes and a label to control items visibility. You use this to make simple games, tab menus and more.

A great tutorial with examples you can try out is at http://css-tricks.com/the-checkbox-hack/ but in essence, you'd do something like this: (from the tutorial)

input[type=checkbox]:checked ~ div {
   background: red;
}

Note that you have the :checked property and the general sibling selector in this example. You can get a lot more sophisticated.

Check out the CSS Panic game which uses this same capability.