Is there a way to dynamically change content without javascript?

Question

I am creating a page for work in which there is a section where the content should change dynamically when the button (s) is pressed. I know several different ways to do this, but they are all related to a particular kind of javascript. My features currently do not include a script entry for this site, so I will investigate if there is a way to do this with JUST css before telling the project manager that one of our javascript guys will have to process it. So, does anyone know any cool CSS methods that can get the desired effect?

Answer 1

You can use the CSS :targetpseudo-class selector . This will require replacing, instead of buttons, aelements that force the URL of your document to use a hash related to the attribute of the idelement 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>

Run codeHide result

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 labels to control the visibility of elements. You use this to create simple games, tab menus, etc.

, , http://css-tricks.com/the-checkbox-hack/, - : (from )

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

, : checked . .

CSS Panic, .

Answer 3

, - CSS, , , . , . , CSS , ( ). , javascript, , . javascript. jquery, .

HTML is not intended to be dynamic; it is just a document format, more or less. I don't think CSS was designed for great dynamism by simply changing styles on certain events. Therefore, I think, because changing the content does not change the style, it is either impossible or not a very beautiful way to do it.

Good luck