Finish page exemple

src/exemple-page.js

@@ -0,0 +1,34 @@
+const firstBtn = document.getElementById('first');
+const codeFirst = document.getElementById('codeFirst');
+
+const secondBtn = document.getElementById('second');
+const codeSecond = document.getElementById('codeSecond');
+
+const thirdBtn = document.getElementById('third');
+const codeThird = document.getElementById('codeThird');
+
+const fourthBtn = document.getElementById('fourth');
+const codeFourth = document.getElementById('codeFourth');
+
+const fifthBtn = document.getElementById('fifth');
+const codeFifth = document.getElementById('codeFifth');
+
+firstBtn.addEventListener('click', () => {
+    codeFirst.classList.toggle("active")
+})
+
+secondBtn.addEventListener('click', () => {
+    codeSecond.classList.toggle("active")
+})
+
+thirdBtn.addEventListener('click', () => {
+    codeThird.classList.toggle("active")
+})
+
+fourthBtn.addEventListener('click', () => {
+    codeFourth.classList.toggle("active")
+})
+
+fifthBtn.addEventListener('click', () => {
+    codeFifth.classList.toggle("active")
+})

src/index.html

@@ -34,13 +34,13 @@
 
           <input type="submit" value="Отправить!" class="example-select_submit" />
 
-          <code>
+          <button type="button" class="check-code" id="first">Посмотреть код</button>
+          <code id="codeFirst">
             <pre>
               <span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">DropDown</span>({
                 selector: <span class="code__string">'.cg-dropdown_one',</span> 
                 placeholder: <span class="code__string">'Выберите авто',</span> 
                 lable: <span class="code__string">'EXAMPLE',</span> 
-                span.code__string 
                 items: [
                   <span class="code__string">'BMW',</span>
                   {
@@ -71,8 +71,9 @@
         <div class="layout-select">
           <button class="cg-dropdown cg-dropdown_three"></button>
         </div>
+        <button type="button" class="check-code" id="second">Посмотреть код</button>
 
-        <code>
+        <code id="codeSecond">
           <pre>
             <span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">DropDown</span>({
               selector: <span class="code__string">'.cg-dropdown_three',</span> 
@@ -100,8 +101,9 @@
         <div class="layout-select">
           <button class="cg-dropdown cg-dropdown_categories"></button>
         </div>
+        <button type="button" class="check-code" id="third">Посмотреть код</button>
 
-        <code>
+        <code id="codeThird">
           <pre>
             <span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">DropDown</span>({
               selector: <span class="code__string">'.cg-dropdown_categories',</span> 
@@ -160,7 +162,9 @@
           <button class="cg-dropdown cg-dropdown_usedBtn"></button>
         </div>
 
-        <code>
+        <button type="button" class="check-code" id="fourth">Посмотреть код</button>
+
+        <code id="codeFourth">
           <pre>
             <span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">DropDown</span>({
               selector: <span class="code__string">'.cg-dropdown_usedBtn',</span> 
@@ -208,20 +212,20 @@
       <div class="example-select">
         <h1 class="example-select_title">Функция disabled</h1>
 
-        <input type="checkbox" name="chbx" id="checkboxDisable" style="margin-bottom: 16px" />
+        <input type="checkbox" name="chbx" id="checkboxDisable" style="margin: 16px" />
         <label for="checkboxDisable">Вы согласны на обработку данных</label>
 
         <div class="layout-select">
           <button class="cg-dropdown cg-dropdown_checkboxDisable"></button>
         </div>
 
-        <code>
+        <button type="button" class="check-code" id="fifth">Посмотреть код</button>
+        <code id="codeFifth">
           <pre>
             <span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">DropDown</span>({
               selector: <span class="code__string">'.cg-dropdown_checkboxDisable',</span> 
               placeholder: <span class="code__string">'Выберите авто',</span> 
               lable: <span class="code__string">'EXAMPLE',</span> 
-              span.code__string 
               items: [
                 <span class="code__string">'BMW',</span>
                 {

src/index.js

@@ -1,4 +1,5 @@
 import { DropDown } from './cg-dropdown';
+import './exemple-page';
 
 // ------------------------------Обычный селект--------------------
 const dropdown = new DropDown({

src/style/ExemplePage.scss

@@ -111,6 +111,10 @@
   }
 }
 
+code {
+  display: none;
+}
+
 pre {
   background: #1e1e1e;
   margin: 15px;
@@ -145,3 +149,17 @@ pre {
     color: #5090ca;
   }
 }
+
+.check-code {
+  width: 200px;
+  height: 35px;
+  cursor: pointer;
+  border: none;
+  border-radius: 10px;
+  margin: 20px 15px;
+  transition: all 1s;
+}
+
+.active {
+  display: block;
+}