accordion

Yaroslav0102030405 · Feb 10, 2024 · 674f37b · 674f37b
1 parent 8245486
commit 674f37b
Show file tree

Hide file tree

Showing 6 changed files with 195 additions and 0 deletions.
diff --git a/care/index.html b/care/index.html
@@ -1101,6 +1101,55 @@ <h2>Find a Doctor near you</h2>
               <button class="form-btn" type="submit">Send</button>
             </form>
           </div>
+          <div class="accordion__wapper">
+            <div class="accordion">
+              <div data-tab="tab-1" class="accordion__title">
+                <h3 class="accordion__title-1">Python</h3>
+                <span></span>
+              </div>
+              <div id="tab-1" class="accordion__content">
+                Pyhton - це скриптова мова програмування. Він універсальний,
+                тому що підходить для рішення різноманітних завдань і багатьої
+                платформ, починая з iOS та Android і закінчує сервеним ОС.
+                <br /><br />
+                Переваги Python. Це інтерпетируєма мова - він не компілюється,
+                тобто до запуску представляє з себе звичайний файл. Програмувати
+                можливо на всіх платформах, мова хорошо спроектована та логічна.
+              </div>
+            </div>
+
+            <div class="accordion">
+              <div data-tab="tab-2" class="accordion__title">
+                <h3 class="accordion__title-1">JavaScript</h3>
+                <span></span>
+              </div>
+              <div id="tab-2" class="accordion__content">
+                Pyhton - це скриптова мова програмування. Він універсальний,
+                тому що підходить для рішення різноманітних завдань і багатьої
+                платформ, починая з iOS та Android і закінчує сервеним ОС.
+                <br /><br />
+                Переваги Python. Це інтерпетируєма мова - він не компілюється,
+                тобто до запуску представляє з себе звичайний файл. Програмувати
+                можливо на всіх платформах, мова хорошо спроектована та логічна.
+              </div>
+            </div>
+
+            <div class="accordion">
+              <div data-tab="tab-3" class="accordion__title">
+                <h3 class="accordion__title-1">Malborde</h3>
+                <span></span>
+              </div>
+              <div id="tab-3" class="accordion__content">
+                Pyhton - це скриптова мова програмування. Він універсальний,
+                тому що підходить для рішення різноманітних завдань і багатьої
+                платформ, починая з iOS та Android і закінчує сервеним ОС.
+                <br /><br />
+                Переваги Python. Це інтерпетируєма мова - він не компілюється,
+                тобто до запуску представляє з себе звичайний файл. Програмувати
+                можливо на всіх платформах, мова хорошо спроектована та логічна.
+              </div>
+            </div>
+          </div>
         </div>
       </section>
     </main>

diff --git a/care/src/js/accordion.js b/care/src/js/accordion.js
@@ -0,0 +1,29 @@
+const titleEl = document.querySelectorAll(".accordion__title");
+const contentEl = document.querySelectorAll(".accordion__content");
+
+titleEl.forEach((item) =>
+  item.addEventListener("click", () => {
+    const activeContent = document.querySelector("#" + item.dataset.tab);
+
+    if (activeContent.classList.contains("active")) {
+      activeContent.classList.remove("active");
+      item.classList.remove("active");
+      activeContent.style.maxHeight = 0;
+    } else {
+      contentEl.forEach((element) => {
+        element.classList.remove("active");
+        element.style.maxHeight = 0;
+      });
+      titleEl.forEach((element) => element.classList.remove("active"));
+
+      item.classList.add("active");
+      activeContent.classList.add("active");
+      activeContent.style.maxHeight = activeContent.scrollHeight + "px";
+    }
+  })
+);
+
+document.querySelector('[data-tab="tab-1"]').classList.add("active");
+document.querySelector("#tab-1").classList.add("active");
+document.querySelector("#tab-1").style.maxHeight =
+  document.querySelector("#tab-1").scrollHeight + "px";
diff --git a/care/src/js/main.js b/care/src/js/main.js
@@ -21,3 +21,4 @@ import "./mouse";
 // import "./hero";
 
 import "./timer";
+import "./accordion";
diff --git a/care/src/sass/components/accordion/accordion.scss b/care/src/sass/components/accordion/accordion.scss
@@ -0,0 +1,112 @@
+.accordion__title-1 {
+  margin-bottom: 0;
+}
+
+.accordion__wapper {
+  margin-top: 50px;
+  display: flex;
+  flex-direction: column;
+  // justify-content: center;
+  align-items: center;
+}
+
+.accordion {
+  display: flex;
+  flex-direction: column;
+  max-width: 600px;
+  width: 100%;
+}
+
+// .accordion__content {
+//   display: none;
+// }
+
+.accordion__title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 22px;
+  padding: 10px 20px;
+  // cursor: pointer;
+  cursor: url("../image/cursor-hand.png"), auto;
+
+  border: 1px solid $border-grey-color;
+  border-top: 0;
+  // color: $text-color;
+  background-color: $white-color;
+}
+
+.accordion:first-child {
+  border-top: 1px solid $border-grey-color;
+}
+
+.accordion__title.active {
+  box-shadow: 0 0 12px 1px $accent-color;
+  // color: $white-color;
+  // background-color: $accent-color;
+}
+
+.accordion__title span {
+  display: inline-flex;
+  position: relative;
+  width: 40px;
+  height: 40px;
+  // background-color: transparent;
+  transform: rotate(0);
+  transition: transform 0.5s ease-out;
+}
+
+.accordion__title.active span {
+  transform: rotate(45deg);
+}
+
+.accordion__title span:before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 2%;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  background-color: $plus-grey-color;
+}
+
+.accordion__title span::after {
+  content: "";
+  position: absolute;
+  width: 2px;
+  height: 50%;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  background-color: $plus-grey-color;
+}
+
+.accordion__content {
+  font-size: 20px;
+  line-height: 1.3;
+  overflow: hidden;
+  padding: 0 20px;
+  border: 1px solid $border-grey-color;
+  border-top: none;
+  background-color: $white-color;
+  max-height: 0;
+  // opacity: 0;
+  // visibility: hidden;
+  transition:
+    max-height 0.5s ease-out,
+    padding 0.5s ease-out;
+  // opacity 0.1s ease-out 0.5s;
+  // visibility 0.1s ease-out 0.5s;
+}
+
+.accordion__content.active {
+  visibility: visible;
+  opacity: 1;
+  padding: 20px;
+  transition:
+    max-height 0.5s ease-out,
+    padding 0.5s ease-out;
+  // opacity 0.1s ease-out;
+  // visibility 0.1s ease-out 0.5s;
+}
diff --git a/care/src/sass/style.scss b/care/src/sass/style.scss
@@ -40,6 +40,7 @@
 @import "./components/service.scss";
 @import "./components/apps.scss";
 @import "./components/contacts.scss";
+@import "./components/accordion/accordion.scss";
 @import "./components/footer.scss";
 
 body {

diff --git a/care/src/sass/variables.scss b/care/src/sass/variables.scss
@@ -8,3 +8,6 @@ $button-accent-color: #ff6666;
 $mobile: 480px;
 $tablet: 768px;
 $desktop: 1200px;
+
+$plus-grey-color: #a1a3a5;
+$border-grey-color: #dee2ef;