Accordeon Vertical

accordeon-vertical

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();
  });
});