Guest User

Untitled

a guest
May 27th, 2016
86
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.75 KB | None | 0 0
  1. JADE:
  2. section.accordeon__wrapper
  3. ul.accordeon
  4. li.accordeon__item
  5. a.accordeon__trigger(href="#{js}") accordeon item 1
  6. ul.accordeon__inner
  7. li.accordeon__inner__item: a.accordeon__inner__link(href="#{js}") accordeon inner link 1
  8. li.accordeon__inner__item: a.accordeon__inner__link(href="#{js}") accordeon inner link 2
  9. li.accordeon__inner__item: a.accordeon__inner__link(href="#{js}") accordeon inner link 3
  10. li.accordeon__item
  11. a.accordeon__trigger(href="#{js}") accordeon item 2
  12. ul.accordeon__inner
  13. li.accordeon__inner__item: a.accordeon__inner__link(href="#{js}") accordeon inner link 1
  14. li.accordeon__inner__item: a.accordeon__inner__link(href="#{js}") accordeon inner link 2
  15. li.accordeon__inner__item: a.accordeon__inner__link(href="#{js}") accordeon inner link 3
  16. li.accordeon__item
  17. a.accordeon__trigger(href="#{js}") accordeon item 3
  18. ul.accordeon__inner
  19. li.accordeon__inner__item: a.accordeon__inner__link(href="#{js}") accordeon inner link 1
  20. li.accordeon__inner__item: a.accordeon__inner__link(href="#{js}") accordeon inner link 2
  21. li.accordeon__inner__item: a.accordeon__inner__link(href="#{js}") accordeon inner link 3
  22. li.accordeon__item
  23. a.accordeon__trigger(href="#{js}") accordeon item 4
  24. ul.accordeon__inner
  25. li.accordeon__inner__item: a.accordeon__inner__link(href="#{js}") accordeon inner link 1
  26. li.accordeon__inner__item: a.accordeon__inner__link(href="#{js}") accordeon inner link 2
  27. li.accordeon__inner__item: a.accordeon__inner__link(href="#{js}") accordeon inner link 3
  28. li.accordeon__item
  29. a.accordeon__trigger(href="#{js}") accordeon item 5
  30. ul.accordeon__inner
  31. li.accordeon__inner__item: a.accordeon__inner__link(href="#{js}") accordeon inner link 1
  32. li.accordeon__inner__item: a.accordeon__inner__link(href="#{js}") accordeon inner link 2
  33. li.accordeon__inner__item: a.accordeon__inner__link(href="#{js}") accordeon inner link 3
  34.  
  35. Stylus:
  36. .accordeon
  37. list-style-type none
  38. margin 0
  39. padding 0
  40.  
  41. &__wrapper
  42. width 40%
  43.  
  44. &__item
  45. display block
  46. &:hover .accordeon__trigger
  47. color salmon
  48.  
  49. &__trigger
  50. display block
  51. vheight(40px)
  52. text-decoration none
  53. transition all .2s
  54.  
  55. &__inner
  56. list-style-type none
  57. margin 0
  58. padding 0 0 0 20px
  59. display none
  60.  
  61. &__link
  62. display block
  63. vheight(30px)
  64. text-decoration none
  65. transition all .2s
  66. &:hover
  67. color salmon
  68.  
  69. jQuery:
  70. $(function(){
  71. $('.accordeon').find('.accordeon__trigger').on('click',function(){
  72. $(this).siblings('.accordeon__inner').stop(true,true).slideToggle()
  73. .parents('.accordeon__item').siblings().children('.accordeon__inner').stop(true,true).slideUp();
  74. });
  75. });
Add Comment
Please, Sign In to add comment