A JQuery Toggle Function to Replace the RJS/Scriptaculous Visual_Effect Helper

We have been using JQuery instead of Prototype and Scriptaculous a lot this year and needed an easy, non-obtrusive function to replace:

<%= link_to_function "Some Text",
visual_effect(:toggle_slide, "descript_#{h(model.id)}") %>

The rails helper was great because it made it easy to have multiple toggle links that worked independently, but we needed something simular to work with the JQuery library.

So we ended up modifying a JQuery function to use the rel tag to hold the specific id and then insert that as the selector for the toggle.

That way each time you use in a block, each toggle link is binded to each id.

To set up the html, we did:

Click for Description

We found a great tutorial on basic toggle functions for Jquery and added some extra handling to take the rel tag and use it in the toggle.

You can check out LearningJquery.com to learn more and also this post page to see more example of custom toggle functions.

For what we needed, we did:

$(document).ready(function(){
  jQuery.fn.slideFadeToggle = function(speed, easing, callback) {
    return this.animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback);  
  };

  $('.fade').click(function() {
    var link_id = $(this).attr('rel');
    $('#'+link_id).slideFadeToggle('slow');
    return false;
});