troubleshooting Question

jQuery hide show table elements

Avatar of dlcnet
dlcnetFlag for United Kingdom of Great Britain and Northern Ireland asked on
jQuery
6 Comments1 Solution249 ViewsLast Modified:
Hi experts!

I have the following code attached bellow. I would like to add a click event to all the image files, so that when the user clicks on the image the underneath previously hidden tr with the textarea is shown and in the same time the image changes from + to -.
Second I would like to be able that when the user navigates with the tab key he would be able when the focus is on the image by pressing the space key to obtain the same effect i.e to make the bellow tr visible.

Thanks!
<!DOCTYPE html>

<html lang="en">
<head>
	<meta charset="utf-8">
	<title>untitled</title>
    <style>
        .hide {display:none;}
        .width150px {width:150px;}
        .width200px {width:200px;}
        .width75px {width:75px;}
    </style>
</head>
<body>
    <table>
        <tr>
            <td class="width150px">Row1</td>
            <td class="width200px">&nbsp;</td>
            <td class="width75px"><img src="img/plus.gif" width="20" height="20" /></td>
        </tr>
        <tr class="hide">
            <td colspan="3">
                <textarea cols="3" rows="5"></textarea>
            </td>
        </tr>
        <tr>
            <td class="width150px">Row1</td>
            <td class="width200px">&nbsp;</td>
            <td class="width75px"><img src="img/plus.gif" width="20" height="20" /></td>
        </tr>
        <tr class="hide">
            <td colspan="3">
                <textarea cols="3" rows="5"></textarea>
            </td>
        </tr>
        <tr>
            <td class="width150px">Row1</td>
            <td class="width200px">&nbsp;</td>
            <td class="width75px"><img src="img/plus.gif" width="20" height="20" /></td>
        </tr>
        <tr class="hide">
            <td colspan="3">
                <textarea cols="3" rows="5"></textarea>
            </td>
        </tr>

    </table>

</body>
</html>
Join the community to see this answer!
Join our exclusive community to see this answer & millions of others.
Unlock 1 Answer and 6 Comments.
Join the Community
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 6 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros