show code

src/blocks/blocks-library/blocks-library.js

+$( document ).ready(function() {
+  $('.js-library-code-toggler').on('click', function(){
+    $(this).closest('.js-library-code-parent').find('.js-library-code').slideToggle();
+  });
+});

src/blocks/blocks-library/blocks-library.less

@@ -55,7 +55,7 @@
     top: 0;
     left: -4rem;
     width: 3rem;
-    height: 3rem;
+    height: 2rem;
     cursor: pointer;
   }
 
@@ -85,8 +85,11 @@
   }
 
   &__code {
-    max-height: 0;
-    overflow: hidden;
+    display: none;
+
+    pre {
+      margin: 0;
+    }
   }
 }
 

src/blocks_library.html

@@ -1542,9 +1542,9 @@
         <input type="submit" class="btn  btn--danger" value="Input">
         <button class="btn  btn--danger">Button</button>
       </p>
-      <div class="blocks-library__code-wrapper">
-        <span class="blocks-library__code-show-trigger" title="Показать код"><i class="blocks-library__code-icon"></i></span>
-        <div class="blocks-library__code">
+      <div class="blocks-library__code-wrapper  js-library-code-parent">
+        <span class="blocks-library__code-show-trigger  js-library-code-toggler" title="Показать код"><i class="blocks-library__code-icon"></i></span>
+        <div class="blocks-library__code  js-library-code">
           <pre>
             <code class="html">&lt;input type="text" value="Текстовое поле для сравнения высоты" style="width:70px"&gt;</code>
             <code class="html"> </code>