Added arrow icon in accordeon

js-tasks-ru · Dec 17, 2024 · a68d409 · a68d409
1 parent b647b4a
commit a68d409
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 4 deletions.
diff --git a/components/accordion/accordion.css b/components/accordion/accordion.css
@@ -1,4 +1,6 @@
 .accordion {
+    display: flex;
+    flex-direction: column;
     font-family: 'Inter', sans-serif;
     font-size: 16px;
     font-style: normal;
@@ -11,7 +13,6 @@
     border: 1px solid var(--grey-3);
     padding: 24px 32px;
     border-radius: 8px;
-    cursor: pointer;
 }
 
 .accordion__item:last-child {
@@ -20,6 +21,18 @@
 
 .accordion__summary {
     list-style: none;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    cursor: pointer;
+}
+
+.accordion__icon {
+    width: 24px;
+    height: 24px;
+    stroke: var(--grey-4);
+    fill: none;
+    stroke-width: 2px;
 }
 
 .accordion__summary::-webkit-details-marker {
@@ -30,4 +43,8 @@
     color: var(--grey-4);
     padding-top: 16px;
     padding-bottom: 8px;
+}
+
+.accordion__item[open] .accordion__icon {
+    transform: rotate(180deg);
 }
diff --git a/components/accordion/index.html b/components/accordion/index.html
@@ -7,29 +7,40 @@
     <title>Accordeon</title>
 
     <link rel="stylesheet" href="../../assets/css/main.css">
+
+    <script src="https://unpkg.com/feather-icons"></script>
 </head>
 
 <body>
     <div class="container">
         <div class="accordion">
             <details class="accordion__item" open>
-                <summary class="accordion__summary">Why did the programmer quit his job?</summary>
+                <summary class="accordion__summary">Why did the programmer quit his job?
+                    <i data-feather="chevron-down" class="accordion__icon"></i>
+                </summary>
                 <p class="accordion__text">Because he didn't get arrays (a raise)!</p>
             </details>
 
             <details class="accordion__item">
-                <summary class="accordion__summary">How do you comfort a JavaScript bug?</summary>
+                <summary class="accordion__summary">How do you comfort a JavaScript bug?
+                    <i data-feather="chevron-down" class="accordion__icon"></i>
+                </summary>
                 <p class="accordion__text">You console it!</p>
             </details>
 
             <details class="accordion__item">
-                <summary class="accordion__summary">Why do programmers prefer dark mode?</summary>
+                <summary class="accordion__summary">Why do programmers prefer dark mode?
+                    <i data-feather="chevron-down" class="accordion__icon"></i>
+                </summary>
                 <p class="accordion__text">Because light attracts bugs!</p>
             </details>
         </div>
 
     </div>
 
+    <script>
+        feather.replace();
+      </script>
 </body>
 
 </html>