frontend.md

выпадающий текст после нажатия на линк

in some_viwe_file.html.haml

.home-services
  %a{"data-toggle-selector" => "#me", :href => "#"}
    some link name

  #me{class: "cont"}
    %p
      Some text

  %a{:href => "#", "data-toggle-selector" => "#ve"}
    enother link name
  #ve{class: "cont"}
    %p
      some text

:javascript

  $(function () {
    $('[data-toggle-selector]').on('click',function (e) {
        e.preventDefault()
        $($(this).data('toggle-selector')).toggle(300);
    })
  })

in .css.scss

.home-services {
  padding-top: 11px;

  > li {
    > a {
      border-bottom: 2px solid transparent;
      bottom: -2px;
      padding: 9px 12px 9px 10px;
      color: $col-gold_dark;
      font-size: 17px;
      text-decoration: none;

      &:focus {
        border-bottom: 2px solid transparent;
      }

      &:hover {
        background-color: transparent;
        color: $col-gold_dark; // $gray-darker; //$col-primary;
        border-bottom: 2px solid $col-gold_dark;
        bottom: -2px;
      }
    }
  }

  > li.active {
    > a {
      background-color: transparent;
      color: $col-gold_dark;
      border-bottom1: 2px solid $col-gold_dark; //$col-primary;
      bottom: -2px;
    }
  }

  p {
    color: $gray-lightest2;
    font-size:14px;
    padding-left: 20px
  }

  > a {
    color: $col-gold_dark;
    display: block;
    margin-bottom: 15px;
    outline: none;

    &:hover, &:focus{
      outline: none;
    }
  }

  div.cont{
    display: none;
  }
}