Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- JADE:
- section.accordeon__wrapper
- ul.accordeon
- li.accordeon__item
- a.accordeon__trigger(href="#{js}") accordeon item 1
- ul.accordeon__inner
- li.accordeon__inner__item: a.accordeon__inner__link(href="#{js}") accordeon inner link 1
- li.accordeon__inner__item: a.accordeon__inner__link(href="#{js}") accordeon inner link 2
- li.accordeon__inner__item: a.accordeon__inner__link(href="#{js}") accordeon inner link 3
- li.accordeon__item
- a.accordeon__trigger(href="#{js}") accordeon item 2
- ul.accordeon__inner
- li.accordeon__inner__item: a.accordeon__inner__link(href="#{js}") accordeon inner link 1
- li.accordeon__inner__item: a.accordeon__inner__link(href="#{js}") accordeon inner link 2
- li.accordeon__inner__item: a.accordeon__inner__link(href="#{js}") accordeon inner link 3
- li.accordeon__item
- a.accordeon__trigger(href="#{js}") accordeon item 3
- ul.accordeon__inner
- li.accordeon__inner__item: a.accordeon__inner__link(href="#{js}") accordeon inner link 1
- li.accordeon__inner__item: a.accordeon__inner__link(href="#{js}") accordeon inner link 2
- li.accordeon__inner__item: a.accordeon__inner__link(href="#{js}") accordeon inner link 3
- li.accordeon__item
- a.accordeon__trigger(href="#{js}") accordeon item 4
- ul.accordeon__inner
- li.accordeon__inner__item: a.accordeon__inner__link(href="#{js}") accordeon inner link 1
- li.accordeon__inner__item: a.accordeon__inner__link(href="#{js}") accordeon inner link 2
- li.accordeon__inner__item: a.accordeon__inner__link(href="#{js}") accordeon inner link 3
- li.accordeon__item
- a.accordeon__trigger(href="#{js}") accordeon item 5
- ul.accordeon__inner
- li.accordeon__inner__item: a.accordeon__inner__link(href="#{js}") accordeon inner link 1
- li.accordeon__inner__item: a.accordeon__inner__link(href="#{js}") accordeon inner link 2
- li.accordeon__inner__item: a.accordeon__inner__link(href="#{js}") accordeon inner link 3
- Stylus:
- .accordeon
- list-style-type none
- margin 0
- padding 0
- &__wrapper
- width 40%
- &__item
- display block
- &:hover .accordeon__trigger
- color salmon
- &__trigger
- display block
- vheight(40px)
- text-decoration none
- transition all .2s
- &__inner
- list-style-type none
- margin 0
- padding 0 0 0 20px
- display none
- &__link
- display block
- vheight(30px)
- text-decoration none
- transition all .2s
- &:hover
- color salmon
- jQuery:
- $(function(){
- $('.accordeon').find('.accordeon__trigger').on('click',function(){
- $(this).siblings('.accordeon__inner').stop(true,true).slideToggle()
- .parents('.accordeon__item').siblings().children('.accordeon__inner').stop(true,true).slideUp();
- });
- });
Add Comment
Please, Sign In to add comment