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 @@
                 </div>
             </div>
 
+            <div class="accordion">
+                <div class="container">
+                    <div class="content-2">
+                        <h2>How we can make a difference</h2>
+                        <div class="question-answ">
+                            <div class="question">
+                                <h3 class="title-question">Give blood</h3>
+                                <button class="question-btn">
+                                    <span class="icon-up">
+                                        <i class='bx bx-chevron-up'></i>
+                                    </span>
+                                    <span class="icon-down">
+                                        <i class='bx bx-chevron-down'></i>
+                                    </span>
+                                </button>
+                            </div>
+                            <div class="answer">
+                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
+                            </div>
+                        </div>
+                        <div class="question-answ">
+                            <div class="question">
+                                <h3 class="title-question">Host a Blood Drive</h3>
+                                <button class="question-btn">
+                                    <span class="icon-up">
+                                        <i class='bx bx-chevron-up'></i>
+                                    </span>
+                                    <span class="icon-down">
+                                        <i class='bx bx-chevron-down'></i>
+                                    </span>
+                                </button>
+                            </div>
+                            <div class="answer">
+                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
+                            </div>
+                        </div>
+                        <div class="question-answ">
+                            <div class="question">
+                                <h3 class="title-question">Volunteer</h3>
+                                <button class="question-btn">
+                                    <span class="icon-up">
+                                        <i class='bx bx-chevron-up'></i>
+                                    </span>
+                                    <span class="icon-down">
+                                        <i class='bx bx-chevron-down'></i>
+                                    </span>
+                                </button>
+                            </div>
+                            <div class="answer">
+                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
+                            </div>
+                        </div>
+                        <div class="question-answ">
+                            <div class="question">
+                                <h3 class="title-question">Join Our Team</h3>
+                                <button class="question-btn">
+                                    <span class="icon-up">
+                                        <i class='bx bx-chevron-up'></i>
+                                    </span>
+                                    <span class="icon-down">
+                                        <i class='bx bx-chevron-down'></i>
+                                    </span>
+                                </button>
+                            </div>
+                            <div class="answer">
+                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
+                            </div>
+                        </div>       
+                    </div>
+                    <div class="content-2-img">
+                        <img src="images/accordion.png" alt="">
+                    </div>
+                </div>
+            </div>
 
+            
         </main>
 
 
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;
+    }
 
 }