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 bu

Answer 1

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.

Answer 2

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 3

I don't think there is any way to directly modify the content with CSS, because as its name suggests, it is specifically for style. I don't know of any tricks, sorry. I don't think CSS is actually an appropriate way to do this, because it is not good code organization (although web is not known for good code organization anyway). It should be really simple to bang out the javascript, so I recommend just doing it yourself if at all possible. Changing content with a button press really isn't a difficult javascript problem. Throw in some jquery, and you can get slick transitions, too.

HTML is not designed to be dynamic, it's simply a document format, more or less. I don't think CSS was designed for much dynamism either, just changing styles on certain events. So I think because changing content is not changing style, it is either not possible, or not a very pretty way to do it.

Good luck!