Code Review Stack Exchange is a question and answer site for peer programmer code reviews. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

Simple example, I need to render div with some text hidden by default. I'll do something like:

= link_to 'Display text', '#'
.div_with_text{ style: 'display: none;' }
  = 'Some text!'

And after that, I'll write some jQuery to .hide() and .show() this .div_with_text. I like this approach because I don't mess with classes like .hidden etc. and focus only on element's state. But it's kind of bad practice to inline styles.

How can I deal with it in a more graceful way?

share|improve this question
I'd say to use classes. What's the problem of manipulating state in JS, and style in CSS? – ANeves Nov 27 '12 at 15:40

You have a point for not having a mess with hidden classes, but in this case, they're perfectly fine. Instead of using hide() and show(), toggle the hidden class, just like you said.

If you do this, you may want to have the relevant div's be visible by default and add the hidden class when the document is ready with jQuery.

If you just need some text to be shown/hidden, you could also use the :target pseudo selector to accomplish this. With jQuery you can avoid the jumping behavior when you click on a link with <a href="#anchor-target">link</a>.

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.