Added support for accordions

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>
 

specimen/contexts/default-page.html

@@ -200,7 +200,6 @@ <h3>Steps to launch</h3>
 
     <li>Top Level Item</li>
 </ul>
-</div>
 
 </main>
 

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;
     }

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")
+             }
+        })
+    })
+}