jQuery hide table row

Question

I have the following jQuery script which hides/expands row in table:

it was inspired by this example:

http://www.jankoatwarpspeed.com/examples/expandable-rows/

<script type="text/javascript">  

$(document).ready(function(){
    $("#orders tr:odd").addClass("odd");
    $("#orders tr:not(.odd)").hide();
    $("#orders tr:first-child").show();

    $("#orders tr.odd").click(function(){
        $(this).next("tr").toggle();
        $(this).find(".toggler").toggleClass("on");
        $(this).find(".toggler").text("hide");

    });
});

</script>        

My HTML is the following:

<table class="blueWrapperTbl" id="orders">
  <tbody>
    <tr>
      <td>  <h:outputText value="#{order.orderId}" /> </td>
      <td>  <h:outputText value="#{order.orderId}" /> </td>
      <td>  <h:outputText value="#{order.orderId}" /> </td>
      <td>  <h:outputText value="#{order.orderId}" /> </td>
      <td><a href="#" class="ubber"><b>Change Order</b></a></td>
      <td><a href="#" class="toggler">Show</a></td>
    </tr>
    <tr>
    ...
    </tr> 
</table>

The relevant CSS parts is the following:

.blueWrapperTbl .toggler { background:url(../images/plus.gif) right center no-repeat; padding-right:20px; display:inline-block; text:'fff'}
.blueWrapperTbl .toggler.on { background:url(../images/minus.gif) right center no-repeat; }

I need to do the following:

1. When my row is expended I would like to change 'toggler' text from 'Show' to 'hide'.
2. When my row is hidden I dont need to show 'Change order' URL. It must be hidden.

Please help me.

Answer 1

The toggle() and toggleClass() functions are convenience functions that make it easier to do simple things... but they are limited.

Rather than use toggleClass() , you might consider using an if to check to see if the element has the 'on' class. If it does, remove that class and change the text to 'Show'. If it doesn't, add the 'on' class and change the text to 'Hide'.

Rather than using toggle() , you could check for the visibility of the row. If it's visible, hide it and hide the 'Change order' URL. If it's not visible, show it and show the 'Change order' URL.

Here's a notional example:

$('#orders td a')
    .each(function(){
        if( $(this).hasClass('on') ) {
            $(this).removeClass('on');
            // do other things
        } else {
            $(this).addClass('on');
            // do other things
        }
    }
;

I hope this helps!

Answer 2

1) Instead of

$(this).find(".toggler").text("hide");

use

$(this).find(".toggler").html("hide");

2) Add this to your click handler function

$(this).find(".ubber").toggle();