Is there an easier way to reference the source element for an event?

Question

I'm new to the whole JavaScript and jQuery coding but I'm currently doing this is my HTML:

<a id="tog_table0" 
  href="javascript:toggle_table('#tog_table0', '#hideable_table0');">show</a>

And then I have some slightly ponderous code to tweak the element:

function toggle_table(button_id, table_id) {
         // Find the elements we need
         var table = $(table_id);
         var button = $(button_id);
         // Toggle the table
         table.slideToggle("slow", function () {
         if ($(this).is(":hidden"))
     {
 button.text("show");
     } else {
       button.text("hide");
     }
    });
}

I'm mainly wondering if there is a neater way to reference the source element rather than having to pass two IDs down to my function?

Answer 1

Use 'this' inside the event. Typically in jQuery this refers to the element that invoked the handler.

Also try and avoid inline script event handlers in tags. it is better to hook those events up in document ready.

NB The code below assumes the element invoking the handler (the link) is inside the table so it can traverse to it using closest. This may not be the case and you may need to use one of the other traversing options depending on your markup.

$(function(){ 
   $('#tog_table0').click( toggle_table )
});

function toggle_table() {
   //this refers to the element clicked
   var $el = $(this);
   // get the table - assuming the element is inside the table
   var $table = $el.closest('table');
   // Toggle the table
   $table.slideToggle("slow", function () {
       $el.is(":hidden") ? $el.text("show") : $el.text("hide");
   }
}

Answer 2

You can do this:

<a href="" name="#hideable_table0" class="tableHider">show</a>

and change your javascript to this:

$('a.tableHider').click(function() {
    var table = $(this.name); // this refers to the link which was clicked
    var button = $(this);

    table.slideToggle("slow", function() {
        if ($(this).is(':hidden')) { // this refers to the element being animated
            button.html('show');
        }
        else {
            button.html('hide');
        }
    });

    return false;
});

edit: changed script to use the name attribute and added a return false to the click handler.

Answer 3

I'm sure this doesn't answer your question, but there's a nifty plugin for expanding table rows, might be useful to check it out:

http://www.jankoatwarpspeed.com/post/2009/07/20/Expand-table-rows-with-jQuery-jExpand-plugin.aspx