diff --git a/docs/index.html b/docs/index.html
index 705e63b..524affc 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -998,7 +998,26 @@ <h1>Name</h1>
 
 </code>
 </pre>
+</pre>
+<h3 id="accordion-block">Accordion - Block</h3><a class="permalink" href="#accordion-block">permalink</a>
+
+<h4>Expected Contexts</h3>
+<ul>
+<li><span class="distinct">body.defualt-page > main >article</span></li>
+</ul>
+
+<pre>
+<code class="lang-html">
+
+  <article>
+    <h1 >Frequently asked Questions</h1>
+    <button aria-expanded="false"  class="accordion-header" aria-controls="answer1">Question you might have?<img src="/src/svg/cc/icons/cc-arrow-up.svg" alt="" class="accordion-chevron"> </button>
+    <p id="answer1" class="hidden" role="region" aria-labelledby="question1">Answer to the question</p>
+   
+  </article>
 
+</code>
+</pre>
 
 </main>
 
diff --git a/specimen/contexts/default-page.html b/specimen/contexts/default-page.html
index 87e04a9..f59b965 100644
--- a/specimen/contexts/default-page.html
+++ b/specimen/contexts/default-page.html
@@ -200,7 +200,6 @@ <h3>Steps to launch</h3>
 
     <li>Top Level Item</li>
 </ul>
-</div>
 
 </main>
 
diff --git a/src/css/vocabulary.css b/src/css/vocabulary.css
index 6b2601a..b42384a 100644
--- a/src/css/vocabulary.css
+++ b/src/css/vocabulary.css
@@ -1818,6 +1818,42 @@ body > footer .license svg {
 .program-index main > article.projects article a {
     --underline-background-color: var(--vocabulary-brand-color-soft-turquoise);
 }
+/* accordion styles */
+.accordion-header{
+    padding:1rem 1rem;
+    border-bottom: 1px solid gray;
+    cursor: pointer;
+    width: 100%;
+    font-family: 'Roboto Condensed';
+    font-style: normal;
+    font-weight: 700;
+    font-size: 1.75em;
+    display: flex;
+    justify-content: space-between;
+    border: none;
+
+    
+    margin:0;
+    }
+    .accordion-content{
+        display: block;
+        padding:1rem 1rem;
+        margin: 0;
+    }
+    .accordion-chevron{
+        margin-left:1rem;
+        height: 1.8rem;
+        transform: translateY(6px);
+    }
+    .hidden{
+        display: none;
+        opacity: 0;
+    }
+    .accordion-chevron-active{
+        transition:all 300ms ease-in-out;
+        transform: rotateX(180deg);
+    }
+
 
 /* program-page context */
 
@@ -2047,7 +2083,12 @@ body > footer .license svg {
         flex-direction: column;
         flex-wrap: wrap;
     }
-
+     .accordion-chevron{
+        height: 1.5rem;
+     }
+     .accordion-header{
+        font-size: 1.5rem;
+     }
     .team-index main article.persons ul {
         display: initial;
     }
diff --git a/src/js/vocabulary.js b/src/js/vocabulary.js
index fe2885e..6f54f9e 100644
--- a/src/js/vocabulary.js
+++ b/src/js/vocabulary.js
@@ -30,3 +30,36 @@ if (attributionButton !== null && attributionPanel !== null ) {
     });
 
 }
+
+// accordion logic
+
+const accordionHeader = document.querySelectorAll(".accordion-header")
+
+    if(typeof accordionHeader !== null){
+        accordionHeader.forEach(header=>{
+          header.addEventListener("click",(event)=>{
+            // updating aria-expanded attr as user clicks on the  accordion
+            const expanded = header.getAttribute('aria-expanded') === "true" || false;
+            header.setAttribute('aria-expanded', !expanded);
+             const content = header.nextElementSibling
+             const chevron = header.querySelector(".accordion-chevron")
+
+             if(content.classList.contains("hidden")){
+                 // removing hidden class from accordion-content
+                content.classList.toggle("hidden")
+                      // adding accordion-content class in accordion-content
+                 content.classList.toggle("accordion-content")
+                    // adding accordion-chevron-active class in accordion chevron
+                 chevron.classList.toggle("accordion-chevron-active")
+
+            }else{
+                    // removing hidden class from accordion-content
+                    chevron.classList.toggle("accordion-chevron-active") 
+                    // adding hidden class in accordion-content is it is active
+                    content.classList.toggle("hidden")
+                    // removing accordion-content class from accordion-content
+                    content.classList.toggle("accordion-content")
+             }
+        })
+    })
+}
diff --git a/src/svg/cc/icons/cc-arrow-up.svg b/src/svg/cc/icons/cc-arrow-up.svg
new file mode 100644
index 0000000..4921a64
--- /dev/null
+++ b/src/svg/cc/icons/cc-arrow-up.svg
@@ -0,0 +1 @@
+<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg enable-background="new 0 0 32 32" height="32px" id="Layer_1" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M18.221,7.206l9.585,9.585c0.879,0.879,0.879,2.317,0,3.195l-0.8,0.801c-0.877,0.878-2.316,0.878-3.194,0  l-7.315-7.315l-7.315,7.315c-0.878,0.878-2.317,0.878-3.194,0l-0.8-0.801c-0.879-0.878-0.879-2.316,0-3.195l9.587-9.585  c0.471-0.472,1.103-0.682,1.723-0.647C17.115,6.524,17.748,6.734,18.221,7.206z" fill="#515151"/></svg>
\ No newline at end of file