Created
May 25, 2023 09:11
-
-
Save anirudh-munipalli/92485155b5600a94904f1e0baaf7154d to your computer and use it in GitHub Desktop.
Code for creating an animated FAQ section in HTML and JavaScript
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>FAQ Section</title> | |
| <link rel="stylesheet" href="./index.html.css"/> | |
| <script src="index.js"></script> | |
| </head> | |
| <body class="font-sans-serif bg_#dcf7f6"> | |
| <zindagroup id="question" class="border-solid margin-5 pad-x-2 | |
| bg_#addbda bg_#85dedb:hover bg_#43c4c0:active | |
| transition_background-color_.5s"></zindagroup> | |
| <zindagroup id="question-summary" class="width-full pad-3 | |
| color-sky-2 bold-7"></zindagroup> | |
| <header class="bg_#01736f pad-3 margin-bottom-5"> | |
| <h1>FAQ Section</h1> | |
| </header> | |
| <div id="faq-section" class="bg_#557878 pad-3 border-solid border-size-4"> | |
| <details class="question"> | |
| <summary class="question-summary">How do I enroll for the course?</summary> | |
| <p> | |
| Lorem ipsum dolor sit amet consectetur adipisicing elit. | |
| Inventore nostrum eum velit placeat accusantium expedita enim, | |
| obcaecati autem quo ab! | |
| </p> | |
| </details> | |
| <details class="question"> | |
| <summary class="question-summary">Why can I not login</summary> | |
| <p> | |
| Lorem ipsum dolor sit amet consectetur adipisicing elit. | |
| Inventore nostrum eum velit placeat accusantium expedita enim, | |
| obcaecati autem quo ab! | |
| </p> | |
| </details> | |
| <details class="question"> | |
| <summary class="question-summary">What features are offered by this service?</summary> | |
| <p> | |
| Lorem ipsum dolor sit amet consectetur adipisicing elit. | |
| Inventore nostrum eum velit placeat accusantium expedita enim, | |
| obcaecati autem quo ab! | |
| </p> | |
| </details> | |
| <details class="question"> | |
| <summary class="question-summary">How do I cancel my subscription</summary> | |
| <p> | |
| Lorem ipsum dolor sit amet consectetur adipisicing elit. | |
| Inventore nostrum eum velit placeat accusantium expedita enim, | |
| obcaecati autem quo ab! | |
| </p> | |
| </details> | |
| </div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .font-sans-serif{font-family: sans-serif;} | |
| .border-solid{border-style: solid;} | |
| .border-size-4{border-width: 1ch;} | |
| .margin-5{margin: 1em;} | |
| .margin-bottom-5{margin-bottom: 1em;} | |
| .pad-3{padding: .6em;} | |
| .pad-x-2{padding-left: .4em; padding-right: .4em;} | |
| .width-full{width:100%} | |
| .color-sky-2{color: rgb(0, 78, 102);} | |
| .bg_\#dcf7f6{background-color:#dcf7f6 ;} | |
| .bg_\#addbda{background-color:#addbda ;} | |
| .bg_\#85dedb{background-color:#85dedb ;} | |
| .bg_\#43c4c0{background-color:#43c4c0 ;} | |
| .transition_background-color_\.5s{transition:background-color .5s ;} | |
| .bg_\#01736f{background-color:#01736f ;} | |
| .bg_\#557878{background-color:#557878 ;} | |
| .bold-7{font-weight: 560;} | |
| .bg_\#85dedb\:hover:hover{background-color:#85dedb;} | |
| .bg_\#43c4c0\:active:active{background-color:#43c4c0;} | |
| #question{display: none !important;} | |
| .question{border-style: solid;;margin: 1em;;padding-left: .4em; padding-right: .4em;;background-color:#addbda ;;transition:background-color .5s ;;} | |
| .question:hover{background-color:#85dedb;;}.question:active{background-color:#43c4c0;;} | |
| #question-summary{display: none !important;} | |
| .question-summary{width:100%;padding: .6em;;color: rgb(0, 78, 102);;font-weight: 560;;} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| window.onload = document.onload = () => { | |
| var questions = document.getElementsByClassName('question'); | |
| for (let i = 0; i < questions.length; i++) { | |
| const e = questions[i]; | |
| e.children[0].addEventListener('click', (f) => { | |
| onClickSummaryButton(f, e); | |
| }); | |
| } | |
| } | |
| function onClickSummaryButton(event, questionElement){ | |
| event.preventDefault(); | |
| questionElement.style.overflow = 'hidden'; | |
| if(!questionElement.open){ | |
| questionElement.style.height = `${questionElement.offsetHeight}px` | |
| questionElement.open = true; | |
| var contentHeight = questionElement.children[1]; | |
| contentHeight = contentHeight.offsetHeight + parseInt(window.getComputedStyle(contentHeight).getPropertyValue('margin-top')) + parseInt(window.getComputedStyle(contentHeight).getPropertyValue('margin-bottom')); | |
| window.requestAnimationFrame(() => { | |
| const startHeight = `${questionElement.offsetHeight}px`; | |
| const endHeight = `${questionElement.children[0].offsetHeight + contentHeight}px`; | |
| var animation = questionElement.animate({ | |
| height: [startHeight, endHeight] | |
| }, { | |
| duration: 200, | |
| easing: 'linear' | |
| }) | |
| animation.onfinish = () => { | |
| questionElement.style.height = questionElement.style.overflow = ''; | |
| } | |
| }) | |
| } else { | |
| var animation = questionElement.animate({ | |
| height: [`${questionElement.offsetHeight}px`, `${questionElement.children[0].offsetHeight}px`] | |
| }, { | |
| duration: 200, | |
| easing: 'linear' | |
| }); | |
| animation.onfinish = () => { | |
| questionElement.style.height = questionElement.style.overflow = ''; | |
| questionElement.open = false; | |
| } | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment