From 1eb724f532b3f5c6a82983c62fbce343eef67b8b Mon Sep 17 00:00:00 2001 From: JSriwongsa Date: Fri, 21 Jul 2023 19:41:33 -0500 Subject: [PATCH] added accordion --- donation_website/index.html | 75 +++++++++++++++++++++++++++++++++++++ donation_website/main.js | 17 +++++++-- donation_website/style.css | 74 ++++++++++++++++++++++++++++++++++++ 3 files changed, 162 insertions(+), 4 deletions(-) diff --git a/donation_website/index.html b/donation_website/index.html index 26d3c33..1f475f7 100644 --- a/donation_website/index.html +++ b/donation_website/index.html @@ -320,7 +320,82 @@ +
+
+
+

How we can make a difference

+
+
+

Give blood

+ +
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

+
+
+
+
+

Host a Blood Drive

+ +
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

+
+
+
+
+

Volunteer

+ +
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

+
+
+
+
+

Join Our Team

+ +
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

+
+
+
+
+ +
+
+
+ diff --git a/donation_website/main.js b/donation_website/main.js index edefe4f..5b08768 100644 --- a/donation_website/main.js +++ b/donation_website/main.js @@ -76,7 +76,16 @@ const swiper = new Swiper('.swiper', { prevEl: '.button-prev', }, }); - - - - \ No newline at end of file +//accordion +const questions = document.querySelectorAll('.question-answ'); + questions.forEach(function(question){ + const btn = question.querySelector('.question-btn'); + btn.addEventListener("click", function(){ + questions.forEach(function(item){ + if(item !== question){ + item.classList.remove('show-text'); + } + }) + question.classList.toggle('show-text'); + }) + }) diff --git a/donation_website/style.css b/donation_website/style.css index 4568f45..81a8a3c 100644 --- a/donation_website/style.css +++ b/donation_website/style.css @@ -600,6 +600,69 @@ form.search i{ .nextprev i:hover{ color: gray; } +/*----- accordion -----*/ +.accordion .container{ + max-width: 65%; + display: flex; + flex-wrap: wrap; + gap: 50px; + margin-top: 50px; +} +.content-2-img{ + flex: 1 1 21rem; +} +.content-2-img img{ + border-radius: 5px; + height: 90%; +} +.content-2{ + flex: 1 1 21rem; +} +.content-2 h2{ + font-size: 22px; + text-shadow: 2px 2px gray; + text-transform: uppercase; + margin-bottom: 30px; +} +.content-2 .question-answ{ + width: 100%; + border-bottom: 1px solid gray; +} +.content-2 .question{ + display: flex; + justify-content: space-between; +} +.content-2 .title-question{ + margin: 20px 0; + font-size: 20px; + font-weight: 600; + color: #E34234; +} +.content-2 .question-btn{ + font-size: 20px; + background-color: transparent; + border-color: transparent; + cursor: pointer; +} +.content-2 .icon-up{ + display: none; +} +.content-2 .answer{ + font-size: 16px; + line-height: 1.5; + margin-bottom: 10px; + color: #625a71; + display: none; +} +.content-2 .show-text .answer{ + display: block; +} +.content-2 .show-text .icon-up{ + display: inline; +} +.content-2 .show-text .icon-down{ + display: none; +} @@ -670,6 +733,17 @@ form.search i{ max-width: 33.33%; padding: 0 1rem; } + /*----- accordion -----*/ + .question-answ{ + width: 380px; + } + .content{ + margin-top: 100px; + } + .title{ + margin-top: 50px; + font-size: 36px; + } }