Question

I’m developing a small application in Ruby-On-Rails. I want to hide a div in an html.erb file until a link is clicked. What is the simplest way to do this?

Answer 1

In your html file:

<a href="#" id="show_whatever">Show Whatever</a>
<div id="whatever" class="hidden">...</div>

In your CSS file:

div.hidden { display: none; }

In an included javascript file, or inside of <script> tags:

$(function() {
  $('a#show_whatever').click(function(event){
    event.preventDefault();
    $('div#whatever').toggle();
  });
});   

The hidden class is hiding the div. The jQuery function is listining for a click on the link, then preventing the link from being followed (event.preventDefault() keeps it from browsing to #)`, and lastly toggling the visibility of the div.

See the jQuery API for click() and toggle().