From 589b65b82f891b4fbccf0d8f9bca53552f10bfab Mon Sep 17 00:00:00 2001 From: OmarAmeen01 Date: Mon, 7 Oct 2024 23:31:30 +0530 Subject: [PATCH 1/3] added-support-for-accordions --- docs/index.html | 19 ++++++++++++++++++ src/css/vocabulary.css | 33 +++++++++++++++++++++++++++++++- src/js/vocabulary.js | 32 +++++++++++++++++++++++++++++++ src/svg/cc/icons/cc-arrow-up.svg | 1 + 4 files changed, 84 insertions(+), 1 deletion(-) create mode 100644 src/svg/cc/icons/cc-arrow-up.svg diff --git a/docs/index.html b/docs/index.html index fc73658..815f41c 100644 --- a/docs/index.html +++ b/docs/index.html @@ -998,7 +998,26 @@

Name

+ +

Accordion - Block

+ +

Expected Contexts

+ + +
+
+
+  

+    
Frequently asked Questions

+    
Question you might have? 

+    
+   
+  

 
+
+
diff --git a/src/css/vocabulary.css b/src/css/vocabulary.css index 6b2601a..19ba922 100644 --- a/src/css/vocabulary.css +++ b/src/css/vocabulary.css @@ -1818,6 +1818,32 @@ 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; + 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 +2073,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..cf61903 100644 --- a/src/js/vocabulary.js +++ b/src/js/vocabulary.js @@ -30,3 +30,35 @@ if (attributionButton !== null && attributionPanel !== null ) { }); } + +// accordion logic + +const accordionHeader = document.querySelectorAll(".accordion-header") + + if(typeof accordionHeader !== null){ + + accordionHeader.forEach(header=>{ + header.addEventListener("click",(event)=>{ + + 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 @@ + \ No newline at end of file From abd44e0909cc96175584e9e74f28bdd779dc0daa Mon Sep 17 00:00:00 2001 From: OmarAmeen01 Date: Sat, 12 Oct 2024 11:12:20 +0530 Subject: [PATCH 2/3] made accordion accessibe via keyboard input --- docs/index.html | 2 +- specimen/contexts/default-page.html | 7 ++++++- src/css/vocabulary.css | 10 ++++++++++ 3 files changed, 17 insertions(+), 2 deletions(-) diff --git a/docs/index.html b/docs/index.html index 815f41c..8abc155 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1011,7 +1011,7 @@

Expected Contexts

Frequently asked Questions

-

Question you might have?

+
diff --git a/specimen/contexts/default-page.html b/specimen/contexts/default-page.html index 123139c..c43423d 100644 --- a/specimen/contexts/default-page.html +++ b/specimen/contexts/default-page.html @@ -200,7 +200,12 @@

Steps to launch

  • Top Level Item
    • - +
    +

    Frequently asked Questions

    + + + +