Please help with (jExpand)

[chandler]

I need to know How can I restrict the onclick to just the arrow? At the moment you can click anywhere in the row for it to expand.

 

(function($){
    $.fn.jExpand = function(){
        var element = this;

        $(element).find("tr:odd").addClass("odd");
        $(element).find("tr:not(.odd)").hide();
        $(element).find("tr:first-child").show();

        $(element).find("tr.odd").click(function() {
            $(this).next("tr").toggle();
        });
        
    }    
})(jQuery); 

 

        $(document).ready(function(){
            $("#report tr:odd").addClass("odd");
            $("#report tr:not(.odd)").hide();
            $("#report tr:first-child").show();
                
                $("#report tr.odd").click(function(){            
                $(this).next("tr").toggle();
                $(this).find(".arrow").toggleClass("up");
                 
            });
            //$("#report").jExpand();
        });

 

<table id="report">
        <tr>
            <th>Header Content</th>
        </tr>
        <tr>
            <td>Content</td>
            <td></td>
            <td></td>
            <td></td>
            <td><div class="arrow"></div></td>
        </tr>
        <tr>
            <td colspan="5">
                <h4>Additional information</h4>
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                 </ul>   
            </td>
        </tr>
        </table>

 

Im a complete noob at this so much thanks for your help.

[chandler]

anyone got any ideas about this?