Toggling visibility with javascript versus with CSS

Question

Just found out about the CSS tilde selector and it seems like it could be an elegant way to handle toggling input visibility.

The use-case I have in mind is when you only want to display an input to the user when they have checked a checkbox. Currently I do this with javascript and attach listeners to each checkbox, which then search through the DOM to find the appropriate input and toggle a class.

So the question is, why is this bad? And if it isn't, why isn't this prevalent? Why do we do this with .js rather than CSS? It seems to me they are both manipulating the presentation layer in fairly similar ways...

Bonus points for resources.

I don't think the way is as bad, but it's less intuitive. What I find bad is showing an input on checking an unrelated checkbox. — John Dvorak, Feb 06 '13 at 16:23

score 1 · Answer 1 · answered Feb 06 '13 at 16:23

HTML is the Model, it contains the Data
CSS is the View, it contains the Styles
JS is the Controller, it contains the Interactions

This MVC structure makes for a powerful delegation of responsibility. When you want to change the state of a widget on a page, you can use JavaScript to change the available styling hooks:

_{jQuery used for brevity}

$('#button').on('click', function () {
    $('#widget').toggleClass('hidden');
});

_CSS:

.hidden {
    display: none;
}

Using this structure will easily allow you to change how interactions are performed. If you decide later that the widget should be animated, it's a simple change.

Using JavaScript also has the advantage of being backwards compatible. The percentage of users who have JavaScript disabled is remarkably few. While I highly recommend supporting people with JS disabled, that can often be done simply by showing all the content by default, and hiding things only for users who have JS enabled.

Fabrício Matté · Answer 2 · 2013-02-06T16:29:31.570

The use-case I have in mind is when you only want to display an input to the user when they have checked a checkbox.

If you're planning to use the :checked selector for that, your app won't run in old browsers (IE < 9). If you're OK with this restriction, that is, only modern browsers concerned, CSS will do fine as well.

Using JS ensures that your site will run on older browsers too, provided the users have JS enabled.

You can also use a mix of both and it will ensure that your page works in modern browsers even with JS disabled as well as JS-enabled old browsers.

It is often easier to detect whether the browser has JS disabled (e.g. using a stylesheet inside <noscript>) than determining whether a browser supports certain CSS selectors.
Therefore using a JS solution allows you to easily place a disclaimer asking the user to enable JS for the page to work properly.

Though, again, if your site is not aimed at general public that may be using IE8 and below, the CSS solution will do just fine.

score 0 · Answer 3 · answered Feb 06 '13 at 16:29

I would say if you can get away with using the tilde selector, or css in general, then go for it. CSS imho is a cleaner, usually more concise and superior performance way to accomplish the same thing as toggling the item in js. Plus, the browswer support for the tilde is quite good - see http://www.quirksmode.org/css/contents.html

There are times when you must use javascript to accomplish this, for example the element to hide is not a sibling or a descendant of the element in question.

Toggling visibility with javascript versus with CSS

3 Answers3