PageRenderTime 39ms CodeModel.GetById 11ms RepoModel.GetById 1ms app.codeStats 0ms

/jquery/jquery-examples/src/main/webapp/show-hide.html

http://my-studies.googlecode.com/
HTML | 211 lines | 150 code | 61 blank | 0 comment | 0 complexity | c6e31f5d3bf549b2cd8d21edc08c9d1a MD5 | raw file
    

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    2. 

  2. <html>
    3. 

  3. <head >
    4. 

  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    5. 

  5. <link type="text/css" rel="stylesheet" href="resources/css/main.css" />
    6. 

  6. 

  7. <script type="text/javascript" src="resources/js/jquery-1.4.2.min.js"></script>
    8. 

  8. 

  9. <title>Show - Hide</title>
    10. 

  10. 

  11. 

  12. <style type="text/css">
    13. 

  13. 

  14. .head{
    15. 

  15. 	padding-left: 20px;
    16. 

  16. 	cursor: pointer;
    17. 

  17. }
    18. 

  18. 

  19. .content{
    20. 

  20. 	padding: 20px;
    21. 

  21. 	display: none;
    22. 

  22. 	border: solid black 1px;;
    23. 

  23. }
    24. 

  24. 

  25. a {
    26. 

  26. 	text-decoration: none;
    27. 

  27. }
    28. 

  28. 

  29. .mais{
    30. 

  30. 	background: url("resources/images/seta_mais.gif") left no-repeat;
    31. 

  31. }
    32. 

  32. 

  33. .menos{
    34. 

  34. 	background: url("resources/images/seta_menos.gif") left no-repeat;
    35. 

  35. }
    36. 

  36. 

  37. 

  38. </style>
    39. 

  39. 

  40. <script type="text/javascript">
    41. 

  41. 

  42. $(document).ready(function(){
    43. 

  43. 

  44. 	init($("#div-1"));
    45. 

  45. 	
    46. 

  46. 	$('.head').toggle(	
    47. 

  47. 		function(){		
    48. 

  48. 			if($(this).hasClass('mais'))
    49. 

  49. 				showResposta(this);
    50. 

  50. 			else
    51. 

  51. 				hideResposta(this);
    52. 

  52. 		},
    53. 

  53. 		function(){
    54. 

  54. 			if($(this).hasClass('menos'))
    55. 

  55. 				hideResposta(this);
    56. 

  56. 			else
    57. 

  57. 				showResposta(this);								
    58. 

  58. 		}			
    59. 

  59. 	);
    60. 

  60. 

  61. 	
    62. 

  62. 	$('a', $('#menu') ).click( function(event){
    63. 

  63. 		
    64. 

  64. 		var target  = $( "#" + event.target.name, '#container')		
    65. 

  65. 		target.prevAll("div[id^='div']").hide();
    66. 

  66. 		target.nextAll("div[id^='div']").hide();		
    67. 

  67. 		target.show();
    68. 

  68. 

  69. 		init(target);
    70. 

  70. 			
    71. 

  71. 	});	
    72. 

  72. 	
    73. 

  73. });
    74. 

  74. 

  75. 

  76. function init(target){	
    77. 

  77. 	var numPerguntas = $(target).children('div.content');
    78. 

  78. 

  79. 	if (numPerguntas.length == 1)
    80. 

  80. 		showResposta($(target).children('.head'));				
    81. 

  81. }
    82. 

  82. 

  83. 

  84. function showResposta(element) {
    85. 

  85. 	$(element).removeClass('mais').addClass('menos').next().slideDown();
    86. 

  86. }
    87. 

  87. 

  88. function hideResposta(element) {
    89. 

  89. 	$(element).removeClass('menos').addClass('mais').next().slideUp();
    90. 

  90. }
    91. 

  91. 

  92. 

  93. </script>
    94. 

  94. 

  95. 

  96. 

  97. </head>
    98. 

  98. 

  99. 

  100. <body>
    101. 

  101. <h4>Show - Hide </h4>
    102. 

  102. <hr />
    103. 

  103. <br />
    104. 

  104. 

  105. 

  106. <div style="margin-bottom: 10px;" id="menu">
    107. 

  107. 	<a href="#" name="div-1">div 1</a> |
    108. 

  108. 	<a href="#" name="div-2">div 2</a> |
    109. 

  109. 	<a href="#" name="div-3">div 3</a> | 
    110. 

  110. 	<a href="#" name="div-4">div 4</a> 
    111. 

  111. </div>
    112. 

  112. 

  113. 

  114. <div id="container">
    115. 

  115. 		<div style="padding: 20px; border: 1px solid red;" id="div-1">
    116. 

  116. 			 
    117. 

  117. 			 <div style="margin-bottom: 10px;">
    118. 

  118. 			 	<h3>DIV - 1</h3>
    119. 

  119. 			 </div>
    120. 

  120. 			 		
    121. 

  121. 			<h3 class="head mais">
    122. 

  122. 				<a href="#">Lorem ipsum</a>
    123. 

  123. 			</h3>
    124. 

  124. 			<div class="content">		
    125. 

  125. 					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rhoncus ligula est. Sed ac massa et nunc aliquet sollicitudin vel ut massa. Nullam dapibus orci in lacus bibendum dignissim. Integer sed sodales mauris. Nullam nulla risus, pretium at varius in, volutpat eu lectus. Proin sed mattis diam. Ut a faucibus ante. Morbi quis ultrices magna. Donec imperdiet rhoncus eros, porttitor adipiscing ante condimentum in. Aenean pretium porttitor nisl, ut imperdiet leo ullamcorper at. Aenean accumsan mi ut felis eleifend id tincidunt leo consequat.				
    126. 

  126. 			</div>				
    127. 

  127. 				
    128. 

  128. 		</div>
    129. 

  129. 		
    130. 

  130. 		
    131. 

  131. 		<div style="padding: 20px; border: 1px solid red; display: none;" id="div-2">
    132. 

  132. 			 		
    133. 

  133. 			 <div style="margin-bottom: 10px;">
    134. 

  134. 			 	<h3>DIV - 2</h3>
    135. 

  135. 			 </div>		 		
    136. 

  136. 			 		
    137. 

  137. 			<h3 class="head mais">
    138. 

  138. 				<a href="#">Lorem ipsum</a>
    139. 

  139. 			</h3>
    140. 

  140. 			<div class="content">		
    141. 

  141. 					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rhoncus ligula est. Sed ac massa et nunc aliquet sollicitudin vel ut massa. Nullam dapibus orci in lacus bibendum dignissim. Integer sed sodales mauris. Nullam nulla risus, pretium at varius in, volutpat eu lectus. Proin sed mattis diam. Ut a faucibus ante. Morbi quis ultrices magna. Donec imperdiet rhoncus eros, porttitor adipiscing ante condimentum in. Aenean pretium porttitor nisl, ut imperdiet leo ullamcorper at. Aenean accumsan mi ut felis eleifend id tincidunt leo consequat.				
    142. 

  142. 			</div>
    143. 

  143. 					
    144. 

  144. 			<h3 class="head mais">
    145. 

  145. 				<a href="#">Lorem ipsum</a>
    146. 

  146. 			</h3>
    147. 

  147. 			<div class="content">		
    148. 

  148. 					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rhoncus ligula est. Sed ac massa et nunc aliquet sollicitudin vel ut massa. Nullam dapibus orci in lacus bibendum dignissim. Integer sed sodales mauris. Nullam nulla risus, pretium at varius in, volutpat eu lectus. Proin sed mattis diam. Ut a faucibus ante. Morbi quis ultrices magna. Donec imperdiet rhoncus eros, porttitor adipiscing ante condimentum in. Aenean pretium porttitor nisl, ut imperdiet leo ullamcorper at. Aenean accumsan mi ut felis eleifend id tincidunt leo consequat.				
    149. 

  149. 			</div>
    150. 

  150. 			
    151. 

  151. 			<h3 class="head mais">
    152. 

  152. 				<a href="#">Lorem ipsum</a>
    153. 

  153. 			</h3>
    154. 

  154. 			<div class="content">		
    155. 

  155. 					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rhoncus ligula est. Sed ac massa et nunc aliquet sollicitudin vel ut massa. Nullam dapibus orci in lacus bibendum dignissim. Integer sed sodales mauris. Nullam nulla risus, pretium at varius in, volutpat eu lectus. Proin sed mattis diam. Ut a faucibus ante. Morbi quis ultrices magna. Donec imperdiet rhoncus eros, porttitor adipiscing ante condimentum in. Aenean pretium porttitor nisl, ut imperdiet leo ullamcorper at. Aenean accumsan mi ut felis eleifend id tincidunt leo consequat.				
    156. 

  156. 			</div>				
    157. 

  157. 				
    158. 

  158. 		</div>
    159. 

  159. 		
    160. 

  160. 		
    161. 

  161. 		<div style="padding: 20px; border: 1px solid red; display: none;" id="div-3">
    162. 

  162. 			 		
    163. 

  163. 			 <div style="margin-bottom: 10px;">
    164. 

  164. 			 	<h3>DIV - 3</h3>
    165. 

  165. 			 </div>		 		
    166. 

  166. 			 		
    167. 

  167. 			<h3 class="head mais">
    168. 

  168. 				<a href="#">Lorem ipsum</a>
    169. 

  169. 			</h3>
    170. 

  170. 			<div class="content">		
    171. 

  171. 					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rhoncus ligula est. Sed ac massa et nunc aliquet sollicitudin vel ut massa. Nullam dapibus orci in lacus bibendum dignissim. Integer sed sodales mauris. Nullam nulla risus, pretium at varius in, volutpat eu lectus. Proin sed mattis diam. Ut a faucibus ante. Morbi quis ultrices magna. Donec imperdiet rhoncus eros, porttitor adipiscing ante condimentum in. Aenean pretium porttitor nisl, ut imperdiet leo ullamcorper at. Aenean accumsan mi ut felis eleifend id tincidunt leo consequat.				
    172. 

  172. 			</div>
    173. 

  173. 					
    174. 

  174. 			<h3 class="head mais">
    175. 

  175. 				<a href="#">Lorem ipsum</a>
    176. 

  176. 			</h3>
    177. 

  177. 			<div class="content">		
    178. 

  178. 					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rhoncus ligula est. Sed ac massa et nunc aliquet sollicitudin vel ut massa. Nullam dapibus orci in lacus bibendum dignissim. Integer sed sodales mauris. Nullam nulla risus, pretium at varius in, volutpat eu lectus. Proin sed mattis diam. Ut a faucibus ante. Morbi quis ultrices magna. Donec imperdiet rhoncus eros, porttitor adipiscing ante condimentum in. Aenean pretium porttitor nisl, ut imperdiet leo ullamcorper at. Aenean accumsan mi ut felis eleifend id tincidunt leo consequat.				
    179. 

  179. 			</div>
    180. 

  180. 			
    181. 

  181. 			<h3 class="head mais">
    182. 

  182. 				<a href="#">Lorem ipsum</a>
    183. 

  183. 			</h3>
    184. 

  184. 			<div class="content">		
    185. 

  185. 					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rhoncus ligula est. Sed ac massa et nunc aliquet sollicitudin vel ut massa. Nullam dapibus orci in lacus bibendum dignissim. Integer sed sodales mauris. Nullam nulla risus, pretium at varius in, volutpat eu lectus. Proin sed mattis diam. Ut a faucibus ante. Morbi quis ultrices magna. Donec imperdiet rhoncus eros, porttitor adipiscing ante condimentum in. Aenean pretium porttitor nisl, ut imperdiet leo ullamcorper at. Aenean accumsan mi ut felis eleifend id tincidunt leo consequat.				
    186. 

  186. 			</div>				
    187. 

  187. 				
    188. 

  188. 		</div>
    189. 

  189. 		
    190. 

  190. 		<div style="padding: 20px; border: 1px solid red; display: none;" id="div-4">
    191. 

  191. 			 		
    192. 

  192. 			 <div style="margin-bottom: 10px;">
    193. 

  193. 			 	<h3>DIV - 4</h3>
    194. 

  194. 			 </div>		 		
    195. 

  195. 			 		
    196. 

  196. 			<h3 class="head mais">
    197. 

  197. 				<a href="#">Lorem ipsum</a>
    198. 

  198. 			</h3>
    199. 

  199. 			<div class="content">		
    200. 

  200. 					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rhoncus ligula est. Sed ac massa et nunc aliquet sollicitudin vel ut massa. Nullam dapibus orci in lacus bibendum dignissim. Integer sed sodales mauris. Nullam nulla risus, pretium at varius in, volutpat eu lectus. Proin sed mattis diam. Ut a faucibus ante. Morbi quis ultrices magna. Donec imperdiet rhoncus eros, porttitor adipiscing ante condimentum in. Aenean pretium porttitor nisl, ut imperdiet leo ullamcorper at. Aenean accumsan mi ut felis eleifend id tincidunt leo consequat.				
    201. 

  201. 			</div>
    202. 

  202. 					
    203. 

  203. 		</div>		
    204. 

  204. 		
    205. 

  205. 		<div style=" border: 1px solid blue; padding: 5px;">
    206. 

  206. 			gardenal ...	
    207. 

  207. 		</div>
    208. 

  208. </div>
    209. 

  209. 

  210. </body>
    211. 

  211. </html>
    212.