Scriptaculous Effect.BlindUp and Effect.BlindDown

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.
However, the anchor text of the link also changes, via JavaScript, from “show details” to “hide details” when the link is clicked. Clicking on “hide details” will hide the contents of the details div. Clicking on “show details” will show the contents of details div. So the anchor text have a toggle like effect.

Add the JavaScript Defaults Include Line somewhere in your head tag

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.

<head>
  ...
  <%= javascript_include_tag :defaults %>
  ...
</head>

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:

show_details_link displays the “show details” link. Once this link is clicked, the show_details JavaScript function you’ll write below will be executed. The “show details” link is shown and the “hide details” link is hidden, initially.

The hide_details_link displays the “hide details” link but is hidden by default. Notice style=”display:none;”

link_to_function is a helper method that allows you to call JavaScript functions or call them within a block passed to link_to_function. In this case, we’re just calling the JavaScript function we’ve defined elsewhere above.

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

Write JavaScript functions show_details and hide_details

The show_details JavaScript function is the piece of JavaScript code which will show the contents of the details div, hide the contents of the show_details_link div above and show the contents of the hide_details_link div.

The hide_details JavaScript function is the piece of JavaScript code which will hide the contents of the details div, hide the contents of the hide_details_link div above and show the contents of the show_details_link div.

Add the following JavaScript functions in your HEAD tag or make them available somewhere else:

<script type="text/javascript">
  function show_details() {
    Effect.BlindDown('details');
    $('hide_details_link').style.display = 'inline';
    $('show_details_link').style.display = 'none';
  }

  function hide_details() {
    Effect.BlindUp('details');
    $('hide_details_link').style.display = 'none';
    $('show_details_link').style.display = 'inline';
  }
</script>

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>

Rating: 3.5/5 (4 votes cast)

Rating: +2 (from 4 votes)

Scriptaculous Effect.BlindUp and Effect.BlindDown, 3.5 out of 5 based on 4 ratings

Aug200912

navid

1