Here is an example sample code which demonstrates how to use Scriptaculous’ Effect.BlindUp and Effect.BlindDown in your Rails application to show and hide a section of your HTML.
For example, let’s assume you want to hide some details and only show them if the user wants to see those details. These details are placed in a div tag with its own id. BlindUp and BlindDown not only hide and show these details but do so with the drawer-like effect.
BlindUp and BlindDown are just two of the effects contained in the Scriptaculous libraries.
In this example, the hide and show effects are activated by clicking on a link.
Here is the first thing that needs to be done so that the Scriptaculous effects library gets included in your HTML page. Most likely, you’ll want to add the following in your layout file.
Create the “hide details” and “show details” links
The “hide details” link will hide the contents of the details div. The “show details” link will show the contents of the details div. Only one of these links will be shown at a time to the user. Create the following links anywhere you want. These links can be buttons instead.
Here is a brief explanation on each:
The hide_details_link displays the “hide details” link but is hidden by default. Notice style=”display:none;”
<div id="show_details_link" style="display:inline;"> <%= link_to_function "show details", 'show_details()' %> </div> <div id="hide_details_link" style="display:none;"> <%= link_to_function "hide details", 'hide_details()' %> </div>
Add the Details DIV itself (which gets shown and hidden)
Initially, the contents of the details div is hidden by default. That’s why there’s a style=”display:none;” below.
<div id="details" style="display:none;"> Here are the details that are hidden by default initially and shown later when the "show details" link is clicked on. They are later hidden again when the "hide details" link is clicked. </div>
Leave a Reply