Question : Best way to Show/Hide a Div (Jquery, JavaScript)

I'm looking for the best way to achieve what I'm trying to do. The screenshot below is an illustration of how I want the page to operate. When one of the "Read Description" options has been selected, the previously BLANK AREA would be populated with the gray line and gray box (style="showingThisCategory") containing the specific description (so I also need to carry over a category ID). The "Read Description" changes to "Hide Description" and the tr class changes to "showingThisCategory"

screenshot.jpg (264 KB) (File Type Details)
Screenshot

The page is dynamic - I'm not sure where to put the category ID that would match the proper category description... I'm guessing in the a href.

I've attached a txt file which the code in simple HTML format so it's not dynamic for you to view.

Attachments:

samplepage.txt (11 KB) (File Type Details)

Code

Answer : Best way to Show/Hide a Div (Jquery, JavaScript)

Here try this

                       
         
           
             1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:

           
           
             <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
function reset_table(element){
	element.html('Read Description');
	element.removeClass('showing');
	element.removeClass('link_on');
	$("#main_td").removeClass('main_td');
	element.parent().removeClass('link_on');
	$("#div_"+element.attr('id')).hide();
}
$(document).ready(function(){
	$('.link_class').click(function(){
		if($(this).hasClass('showing')){
			reset_table($(this));
		}else{
				$(".td_class").each(function(){
					$(this).removeClass('link_on');
					$(this).children().html('Read Description');
				});
			div_id = 'div_'+$(this).attr('id');
			$(this).parent().addClass('link_on');
			$(this).html('Hide Description');
				$(".div_class").each(function(){
					$(this).css('display','none');
				});
				$(".link_class").each(function(){
					$(this).removeClass('showing');
				})
			$(this).addClass('showing');
			$("#"+div_id).show();
			$("#main_td").addClass('main_td');
		}
	});
});
</script>

<style>
.link_on{
	background-color:#CCC;
}
.div_class{
	background-color:#CCC;
	height:100%;
	width:100%;
}
.main_td{
	background-color:#CCC;
}
.td_class{
	height:30px;
}
</style>
<table width="500" border="0" cellspacing="0" cellpadding="1">
  <tr>
    <td width="166" class="td_class">
    <a href="#" class="link_class" id="1">Read Description</a></td>
    <td width="327" rowspan="6" valign="top" id="main_td">
    <div id="div_1" style="display:none;" class="div_class">content for div 1</div>
    <div id="div_2" style="display:none;" class="div_class">content for div 2</div>
    <div id="div_3" style="display:none;" class="div_class">content for div 3</div>
    <div id="div_4" style="display:none;" class="div_class">content for div 4</div>
    <div id="div_5" style="display:none;" class="div_class">content for div 5</div>
    <div id="div_6" style="display:none;" class="div_class">content for div 6</div>
    </td>
  </tr>
  <tr>
    <td class="td_class"><a href="#" class="link_class" id="2">Read Description</a></td>
  </tr>
  <tr>
    <td class="td_class"><a href="#" class="link_class" id="3">Read Description</a></td>
  </tr>
  <tr>
    <td class="td_class"><a href="#" class="link_class" id="4">Read Description</a></td>
  </tr>
  <tr>
    <td class="td_class"><a href="#" class="link_class" id="5">Read Description</a></td>
  </tr>
  <tr>
    <td class="td_class"><a href="#" class="link_class" id="6">Read Description</a></td>
  </tr>
</table>
<br>
<br>
           
         