# Rendering hidden element from view in Rails, HAML

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?

-
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>.