advanced code snippet search

Posted By

cadic on 02/06/10


Tagged


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

kanampo


Аккордеон

 / Published in: HTML
 
Expand | Embed | Plain Text 
  1. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  2. <head>
  3. 	<title>Acco example</title>
  4. 	<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
  5. 	<!-- Подключаем библиотеку jQuery -->
  6. 	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  7.  
  8. 	<script type="text/javascript">
  9. 		//<![CDATA[
  10. 		// Немного jQuery-магии :)
  11.  
  12. 		// После загрузки окна сворачиваем блок "остальные".
  13. 		// Это сделано для того чтобы при отключенном JS
  14. 		// пользователь видел полную картину.
  15. 		// Ну и поисковики будут недовольны, если у нас в HTML есть
  16. 		// скрытые блоки.
  17. 		window.onload=function(){
  18. 			$("#moreFollowers").hide();
  19. 		}
  20.  
  21. 		// Функция сворачивания.разворачивания
  22. 		function toggleFollowers() {
  23. 			// Операция toggle переключает отображение блока. Если блок невидим -
  24. 			// разворачивает его, если видим - сворачивает. Первый параметр может
  25. 			// принимать значения "slow", "fast" или числовое значение (кол-во
  26. 			// миллисекунд за которое надо "провернуть" операцию. Вместо toggle()
  27. 			// можно использовать другие функции jQuery (slideToggle, animate, ...)
  28. 			// Второй параметр - функция, которую нужно выполнить после завершения
  29. 			// анимации. У нас это - изменение текста ссылки.
  30. 			$("#moreFollowers").toggle("slow", function(){
  31. 				l = $("#moreFollowersLink");
  32. 				l.text(
  33. 					// обычный трехместный оператор - если текст ссылки = "more..."
  34. 					// то заменяем его на "less...", иначе - вставляем "more..."
  35. 					l.text()=="more..."?"less...":"more..."
  36. 				);
  37. 			});
  38. 		}
  39.  
  40. 		//]]>
  41. 	</script>
  42.  
  43. </head>
  44. <body>
  45. 	<div id="test" class="test">
  46. 		<div id="container">
  47. 			<div id="wrapper">
  48. 				<h3>HAHAHA</h3>
  49. 				<p>
  50. 					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque lectus eros, varius non blandit sit amet, posuere in
  51. 					mauris. Duis ultrices hendrerit convallis. Aenean ultrices dui et massa congue euismod. Nulla odio felis, tristique in
  52. 					pellentesque quis, dictum a nisi. Donec congue tempor suscipit. Fusce ultrices tincidunt leo eget pellentesque. Sed ligula
  53. 					nulla, suscipit a consectetur sodales, ultrices a nulla. Proin venenatis varius ligula, non ultricies justo vestibulum
  54. 					quis.
  55. 				</p><br />
  56. 	<!--
  57. 		Блок фоловеров лучше переработать. Сделать не два блока (короткий и длинный),
  58. 		а "короткий" и "остальные". Все операции проводить только над блоком "остальные"
  59. 	-->
  60. 				<div id="followers">
  61. 				<p>
  62. 					<strong>Followers</strong><br />
  63.  
  64. 					<!-- вот короткий блок с тремя товарищами -->
  65. 					<div id="commonFollowers">
  66. 						<a href="#">Mike</a> <a href="#">Alex</a> <a href="#">Vince</a>
  67. 					</div>
  68. 					<!-- а вот блок остальные, здесь у нас ещё три товарища. -->
  69. 					<div id="moreFollowers">
  70. 						<a href="#">Max</a> <a href="#">Gillian</a> <a href="#">Peter</a>
  71. 					</div>
  72.  
  73. 					<!-- ну и ссылка, она немного упрощена -->
  74. 					<a onclick="toggleFollowers(); return false;" href="#" id="moreFollowersLink" class="more">more...</a>
  75. 				</p>
  76. 				</div>
  77. 			</div>
  78. 			<div class="clear"></div>
  79. 		</div>
  80. 	</div>
  81. </body>
  82. </html>

Report this snippet  

You need to login to post a comment.