Toggle row show & hide by clicking on image

Hi
I have the following code work fine when I click on the on the row and the row below shows or hides. But I would like to change to when the user clicks on the div tag with the arrow class instead.

You can see a working demo of this at http://www.afthab.co.uk/test/

This is the jquery code that currently toggles row show and hide
        $("#table_id tr:odd").addClass("master");
        $("#table_id tr:not(.master)").hide();
        $("#table_id tr:first-child").show();
        $("#table_id tr.master").click(function(){
            $(this).next("tr").toggle();
            $(this).find(".arrow").toggleClass("up");
        }); //#table_id tr.master

Open in new window


And I have attached the 2 files that contain main code.

Thank you for any help in advance.
index.php
loaddata.php
style.css
LVL 1
ACEAFTYAsked:
Who is Participating?
 
GaryConnect With a Mentor Commented:
$(".arrow").click(function(){
            $(this).closest("tr").next("tr").toggle();
});

http://jsfiddle.net/zBuh8/1/
0
 
InsoftserviceCommented:
Sorry did not got your question.
Do you mean to say if you click on arrow symbol then and then only toggle should take place right?
0
 
ACEAFTYAuthor Commented:
Thanks that worked perfectly.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.