Добавил компонент collapse

src/blocks/collapse/collapse.html

@@ -3,9 +3,8 @@
 <a
   class="navbar__toggler"
   href="#main-nav-wrapper"
-  id="navbar-toggler"
   data-toggle="collapse"
-  data-toggle-this-class="navbar__toggler-icon--open"
+  data-toggle-this-class="navbar__toggler--open"
   aria-controls="main-nav-wrapper"
   aria-expanded="false">
     <span class="navbar__toggler-icon"></span>
@@ -13,9 +12,9 @@
 
 <button
   class="btn"
+  data-target="#main-nav-wrapper"
   data-toggle-this-class="btn--primary"
   data-toggle="collapse"
-  data-target="#main-nav-wrapper"
   aria-controls="main-nav-wrapper"
   aria-expanded="false">
   показать меню

src/blocks/collapse/collapse.js

+$('[data-toggle="collapse"]').on('click.nth.collapse', function(e){
+  e.preventDefault();
+  // Определим ID целевого элемента
+  var $collapseBlockId = $(this).attr('href');
+  if(!$collapseBlockId) {
+    $collapseBlockId = $(this).data('target');
+  }
+  // Размернем или свернём целевой элемент
+  $($collapseBlockId).slideToggle(250);
+  // Найдем все триггеры открытия и переключим им классы
+  var $triggers = $('[data-toggle="collapse"][href="'+$collapseBlockId+'"], [data-toggle="collapse"][data-target="'+$collapseBlockId+'"]');
+  $triggers.each(function(){
+    $(this).toggleClass($(this).data('toggle-this-class'));
+  });
+  // Сменим aria-expanded
+  $triggers.each(function(){
+    if($(this).attr('aria-expanded') == 'false') {
+      $(this).attr('aria-expanded', 'true');
+    }
+    else {
+      $(this).attr('aria-expanded', 'false');
+    }
+  });
+});

src/blocks/navbar/navbar.less

@@ -67,6 +67,27 @@
     @media (min-width: @screen-lg) {
       display: none;
     }
+
+    &--open {
+      .navbar__toggler-icon {
+        transition: background 0.2s 0;
+        background: transparent;
+
+        &:before,
+        &:after {
+          transition: top 0.2s, transform 0.2s 0.2s;
+          top: 0;
+        }
+
+        &:before {
+          transform: rotate3d(0, 0, 1, 45deg);
+        }
+
+        &:after {
+          transform: rotate3d(0, 0, 1, -45deg);
+        }
+      }
+    }
   }
 
   &__toggler-icon {
@@ -99,30 +120,9 @@
     &:after {
       top: -1rem;
     }
-
-    // Модификатор «открытого» состояния (крестик)
-    &--open {
-      transition: background 0.2s 0;
-      background: transparent;
-
-      &:before,
-      &:after {
-        transition: top 0.2s, transform 0.2s 0.2s;
-        top: 0;
-      }
-
-      &:before {
-        transform: rotate3d(0, 0, 1, 45deg);
-      }
-
-      &:after {
-        transform: rotate3d(0, 0, 1, -45deg);
-      }
-    }
   }
 
   &__slidable-content {
-    padding-top: 0.5em;
 
     // Если JS работает, будем скрывать и показывать по клику
     .js & {

src/blocks_library.html

@@ -24,10 +24,9 @@
     <div class="navbar__inner">
       <div class="navbar__left">
         <a href="/" class="logo  navbar__logo">NTH start project</a>
-        <a class="navbar__toggler" href="#main-nav-wrapper" id="navbar-toggler" data-toggle="collapse" data-toggle-this-class="navbar__toggler-icon--open" aria-controls="main-nav-wrapper" aria-expanded="false">
+        <a class="navbar__toggler" href="#main-nav-wrapper" data-toggle="collapse" data-toggle-this-class="navbar__toggler--open" aria-controls="main-nav-wrapper" aria-expanded="false">
           <span class="navbar__toggler-icon"></span>
         </a>
-        <button class="btn" data-toggle-this-class="btn--primary" data-toggle="collapse" data-target="#main-nav-wrapper" aria-controls="main-nav-wrapper" aria-expanded="false">показать меню</button>
       </div>
       <div class="navbar__right">
         <div class="navbar__slidable-content" id="main-nav-wrapper">
@@ -72,7 +71,7 @@
               </li>
             </ul>
           </nav>
-          <p>Внимание! Работа этого компонента зависит от наличия в сборке компонента collapse</p>
+          <p>Внимание! Работа этого компонента зависит от наличия в сборке jQuery</p>
           <form class="navbar__form">
             <div class="fields-group">
               <label class="field-text  fields-group__item">