Аккордеон


/ Published in: HTML
Save to your folder(s)



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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.