CITGuru/faq.html

## faq.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

#accordion-wrapper{
    margin-top: 20px;
}
        /* Style the buttons that are used to open and close the accordion panel */
.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
  background-color: #ccc;
}

/* Style the accordion panel. Note: hidden by default */

.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
    </style>
</head>

<body>
<div class="">
    <input type="text" id='search' placeholder="Search FAQ" />
    <button id="searchBtn">Search</button>
</div>
<div id="accordion-wrapper"></div>


<script>
    // FAQ: Arrays of Question and Answer Object
    const FAQ = [
        {
            "question": "What's Your Name?",
            "answer": `
            <p>Oyetoke Toby</p>
            `,
        },
        {
            "question": "How do I make payment?",
            "answer": `
            <p>Send money to my account.</p>
            `
        },
        {
            "question": "What's Your Phone Number?",
            "answer": `
            <p>0812829021</p>
            `
        },
        {
            "question": "When do I get back my payment?",
            "answer": `
            <p>At the end of the month</p>
            `
        }
    ]
    // Initiate accordion
    // Turn an element to accordion like element using the name of the elements
    // and its siblings. Attach event listener
    const initiateAccordion = (name)=>{
        var acc = document.getElementsByClassName(name);
        var i;

        for (i = 0; i < acc.length; i++) {
        acc[i].addEventListener("click", function() {
            this.classList.toggle("active");
            var panel = this.nextElementSibling;
            if (panel.style.maxHeight) {
            panel.style.maxHeight = null;
            } else {
            panel.style.maxHeight = panel.scrollHeight + "px";
            }
        });
        }
    }
    const accordionWrapper = document.getElementById("accordion-wrapper")
    var accordionHTML = ""
    // Loop through each FAQ question
    // Create an html string from the question in the accordion template
    FAQ.forEach((question)=>{
        accordionHTML+=`
        <button class="accordion">${question.question}</button>
        <div class="panel">
            ${question.answer}
        </div>
        `
    })
    // append the html string to the accordion wrapper
    accordionWrapper.innerHTML = accordionHTML
    // Call the function to turn all element with such class name to accordion and its siblings
    initiateAccordion("accordion")

    // For search functionality
    document.getElementById("searchBtn").addEventListener("click", function(e){
        e.preventDefault();
        const search = document.getElementById("search").value
        let accordionHTML = ""
        // Loop through each FAQ question
        // Create an html string from the question in the accordion template
        FAQ.forEach((question)=>{
        if(question.question.toLowerCase().includes(search.toLowerCase())){
            accordionHTML+=`
            <button class="accordion">${question.question}</button>
            <div class="panel">
                ${question.answer}
            </div>`
        }
        })
    // append the html string to the accordion wrapper
    accordionWrapper.innerHTML = accordionHTML
    // Call the function to turn all element with such class name to accordion and its siblings
    initiateAccordion("accordion")
    })
</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>

	#accordion-wrapper{
	margin-top: 20px;
	}
	/* Style the buttons that are used to open and close the accordion panel */
	.accordion {
	background-color: #eee;
	color: #444;
	cursor: pointer;
	padding: 18px;
	width: 100%;
	text-align: left;
	border: none;
	outline: none;
	transition: 0.4s;
	}

	/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
	.active, .accordion:hover {
	background-color: #ccc;
	}

	/* Style the accordion panel. Note: hidden by default */

	.panel {
	padding: 0 18px;
	background-color: white;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.2s ease-out;
	}
	</style>
	</head>

	<body>
	<div class="">
	<input type="text" id='search' placeholder="Search FAQ" />
	<button id="searchBtn">Search</button>
	</div>
	<div id="accordion-wrapper"></div>


	<script>
	// FAQ: Arrays of Question and Answer Object
	const FAQ = [
	{
	"question": "What's Your Name?",
	"answer": `
	<p>Oyetoke Toby</p>
	`,
	},
	{
	"question": "How do I make payment?",
	"answer": `
	<p>Send money to my account.</p>
	`
	},
	{
	"question": "What's Your Phone Number?",
	"answer": `
	<p>0812829021</p>
	`
	},
	{
	"question": "When do I get back my payment?",
	"answer": `
	<p>At the end of the month</p>
	`
	}
	]
	// Initiate accordion
	// Turn an element to accordion like element using the name of the elements
	// and its siblings. Attach event listener
	const initiateAccordion = (name)=>{
	var acc = document.getElementsByClassName(name);
	var i;

	for (i = 0; i < acc.length; i++) {
	acc[i].addEventListener("click", function() {
	this.classList.toggle("active");
	var panel = this.nextElementSibling;
	if (panel.style.maxHeight) {
	panel.style.maxHeight = null;
	} else {
	panel.style.maxHeight = panel.scrollHeight + "px";
	}
	});
	}
	}
	const accordionWrapper = document.getElementById("accordion-wrapper")
	var accordionHTML = ""
	// Loop through each FAQ question
	// Create an html string from the question in the accordion template
	FAQ.forEach((question)=>{
	accordionHTML+=`
	<button class="accordion">${question.question}</button>
	<div class="panel">
	${question.answer}
	</div>
	`
	})
	// append the html string to the accordion wrapper
	accordionWrapper.innerHTML = accordionHTML
	// Call the function to turn all element with such class name to accordion and its siblings
	initiateAccordion("accordion")

	// For search functionality
	document.getElementById("searchBtn").addEventListener("click", function(e){
	e.preventDefault();
	const search = document.getElementById("search").value
	let accordionHTML = ""
	// Loop through each FAQ question
	// Create an html string from the question in the accordion template
	FAQ.forEach((question)=>{
	if(question.question.toLowerCase().includes(search.toLowerCase())){
	accordionHTML+=`
	<button class="accordion">${question.question}</button>
	<div class="panel">
	${question.answer}
	</div>`
	}
	})
	// append the html string to the accordion wrapper
	accordionWrapper.innerHTML = accordionHTML
	// Call the function to turn all element with such class name to accordion and its siblings
	initiateAccordion("accordion")
	})
	</script>
	</body>
	</html>