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.

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>

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>

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>

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>
VN:F [1.9.22_1171]
Rating: 3.5/5 (4 votes cast)
VN:F [1.9.22_1171]
Rating: +2 (from 4 votes)
Scriptaculous Effect.BlindUp and Effect.BlindDown, 3.5 out of 5 based on 4 ratings
Facebook Twitter Email

One Comment to “Scriptaculous Effect.BlindUp and Effect.BlindDown”

  1. scotty 2 October 2011 at 10:58 pm #

    Very nice instructions. I used your suggestions and made a slight modification, since I need multiple show/hide’s for different divs:

    function show_log_div(log_div, hide_button_div, show_button_div){
    Effect.BlindDown(log_div);
    $(hide_button_div).style.display = ‘inline’;
    $(show_button_div).style.display = ‘none’;
    }

    function hide_log_div(log_div, hide_button_div, show_button_div){
    Effect.BlindUp(log_div);
    $(hide_button_div).style.display = ‘none’;
    $(show_button_div).style.display = ‘inline’;
    }

    This brought me from 12 functions to 2 (6 divs with show/hide functionality.

    Also used rails instead of link_to, per your suggestion.

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.22_1171]
    Rating: 0 (from 0 votes)

Leave a Reply