How to hide html div

Question

I am developing a small application in Ruby-On-Rails. I want to hide the div in the html.erb file until the link is clicked. What is the easiest 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 the included javascript file or in the <script> tags:

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

The hidden class hides the div. The jQuery function searches for a click on the link and then prevents the link from being tracked ( event.preventDefault() saves it from viewing to # ), and finally switches the visibility of the div.

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

Answer 2

It is easy with javascript. For example, using the jQuery javascript library, you can easily switch the display of divs based on links, as shown here. http://jsfiddle.net/Yvdnx/

HTML:

 <a href="#">Click Me To Display Div</a> <div>Foo</div>​ 

Javascript:

 $(function() { $("div").hide(); $("a").click(function(event) { event.preventDefault(); $("div").toggle(); }); });​ 

jQuery is reliable and works in many browsers, which distinguishes it from using CSS3 selectors such as :target .

Answer 3

You can apply display:none or opacity:0 styles. The first will make the div not take up space on your page, and the second will make it invisible, but it will still save its place. You could say that the first hides it, and the second barely disguises it. There may be other solutions, but these are the ones I know about.