anirudh-munipalli/animated-faq.html

## animated-faq.html
<!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>

## index.html.css
.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;;}

## index.js
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;
        }
    }
}
	<!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>
	.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;;}
	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;
	}
	}
	}