asked on

jQuery hide show table elements

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>

Open in new window

JosephEricDavis

This will be part of your solution.

<!DOCTYPE html>

<html lang="en">
<head>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	<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 class="expander" 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 class="expander" 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 class="expander" 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>
	
	<script>
		$(function() {
			$('.expander').click(function() {
				$(this).parent().parent().next().removeClass('hide');
			});
		});
	</script>

</body>
</html>

Open in new window

JosephEricDavis

I meant to add this in, the extra line here should change your image to the new image that is the - sign.

<script>
		$(function() {
			$('.expander').click(function() {
				$(this).parent().parent().next().removeClass('hide');
				$(this).attr('src', 'x'); //Where x is the new path to the image
			});
		});
	</script>

Open in new window

JosephEricDavis

Now it will reverse when you click it again.

Now we just need to figure out the tab and space events you want to rig up.

<script>
		$(function() {
			$('.expander').click(function() {
				if ($(this).parent().parent().next().hasClass('hide'))
				{
					$(this).parent().parent().next().removeClass('hide');
					$(this).attr('src', 'http://www.nextstudent.com/student-loan-blog/photos/070910/images/523/282x425.aspx'); //Image from google images
				}
				else
				{
					$(this).parent().parent().next().addClass('hide');
					$(this).attr('src', 'http://www.decodeunicode.org/en/u+2212/data/glyph/196x196/2212.gif'); //Image from google images
				}
			});
		});
	</script>

Open in new window

JosephEricDavis

I've been messing with this thing for a while and I can't find a good solution for using the tab key to navigate between your expand buttons. The problem is that images don't receive focus when you are tabbing through a list of inputs in a browser. Secondly, after the end of the list, the browser takes the focus up to the address bar and all the menu items up top. When the focus is up there and away from the document none of the key events that you may have had setup will work because the document is out of focus.

I can continue to try to hash out a solution if you'd like, but what would you think about using the up and down arrow keys to navigate between the expand image buttons?

ASKER CERTIFIED SOLUTION

JosephEricDavis

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

dlcnet

ASKER

@Joseph
Thank you for the examples ;) I will give them a try in the next hours However I think they match what I am looking for.