Setup Video Guide Video
Please Follow The Steps Here
Now Click on Extension and Choose a Appscript Option
After Deploy Allow Permission After Permission Given a URL Comes Which
is Used to Access Your Web App and if You change in codes after
deployment You need to apply Changes Need Deploy Again or Manage
Deployments,
Click 'Watch Now' to learn how to get a
Google Sheet link or make a copy
and Download Code!
Make a Sheet Copy
Contact us For Project
Join Whatsapp Community
Code.gs
function doGet() { var output = HtmlService.createHtmlOutputFromFile('index'); output.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL); return output; } function getFAQDataFromSheet() { var sheetId = "//// PASTE YOUR GOOGLE SHEET ID /////"; var sheet = SpreadsheetApp.openById(sheetId).getSheetByName("FAQ"); var lastRow = sheet.getLastRow(); var lastColumn = sheet.getLastColumn(); var range = sheet.getRange("B2:" + sheet.getRange(lastRow, lastColumn).getA1Notation()); var values = range.getValues(); var FAQData = []; values.forEach(function(row) { var question = row[0]; var answer = []; for (var i = 1; i < row.length; i++) { if (row[i] !== "") { answer.push(row[i]); } else { break; // Stop adding points if an empty cell is encountered } } FAQData.push({ question: question, answer: answer }); }); return FAQData; }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
@import url("https://fonts.googleapis.com/css2?family
=Inter:wght@300;400;700&display=swap");
h2.faq-heading {
font-family: "Inter", sans-serif;
text-align: center;
font-weight: 300;
font-size: 28px;
color: #1d3557;
margin: 8px 0;
margin-top: 60px;
}
.faq-container {
max-width: 900px;
border-radius: 8px;
box-shadow: 0 4px 50px -8px rgba(0, 0, 0, 0.3);
margin: 32px auto;
font-family: "Inter", sans-serif;
color: #1d3557;
line-height: 1.9;
}
.faq-container .question-container {
border-bottom: 1px solid #eee;
}
.faq-container .question {
display: flex;
justify-content: space-between;
gap: 32px;
font-size: 18px;
font-weight: bold;
padding: 16px 24px;
cursor: pointer;
}
.faq-container .question .question-icon {
width: 20px;
height: 20px;
background: #eee;
padding: 4px;
border-radius: 50%;
flex-shrink: 0;
display: flex;
transition: all 300ms ease;
}
.faq-container .question-container.expanded .question-icon {
background: #2a9d8f;
color: #fff;
transform: rotateZ(180deg);
}
.faq-container .answer {
display: flex;
align-items: flex-start;
gap: 8px;
margin: 8px 0;
}
.faq-container .answer .answer-icon {
width: 20px;
flex-shrink: 0;
color: blue;
display: flex;
margin-top: 5px;
}
.faq-container .answer-container {
padding: 0px 32px;
background: #edf2f4;
max-height: 0;
overflow: hidden;
transition: all 300ms ease;
}
.faq-container .question-container.expanded .answer-container {
max-height: 500px;
padding: 8px 32px;
}
</style>
</head>
<body>
<h2 class="faq-heading">Frequently Asked Questions</h2>
<div class="faq-container"></div>
<script>
google.script.run.withSuccessHandler(displayFAQ).getFAQDataFromSheet();
function displayFAQ(FAQData) {
const FAQContainer = document.querySelector(".faq-container");
FAQData.forEach(function(q, index) {
const answerHTML = q.answer
.map(function(a) {
return `<div class="answer">
<span class="answer-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
fill="currentColor" class="w-5 h-5">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000
16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5
2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"/>
</svg>
</span>
${a}
</div>`;
})
.join("");
const html = `<div class="question">
${q.question}
<span class="question-icon"><svg xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"/>
</svg></span>
</div>
<div class="answer-container">
${answerHTML}
</div>`;
const questionContainer = document.createElement("div");
questionContainer.classList.add("question-container");
questionContainer.innerHTML = html;
FAQContainer.appendChild(questionContainer);
const question = questionContainer.querySelector(".question");
question.addEventListener("click", function() {
const isExpanded = !questionContainer.classList.contains("expanded");
removeAllExpanded();
questionContainer.classList.toggle("expanded", isExpanded);
const answerContainer = questionContainer.querySelector(".answer-container");
answerContainer.style.maxHeight = isExpanded ? `${answerContainer.scrollHeight}px` : "0";
});
});
}
function removeAllExpanded() {
const questionContainers = document.querySelectorAll
(".faq-container .question-container");
questionContainers.forEach(function(q) {
q.classList.remove("expanded");
const answerContainer = q.querySelector(".answer-container");
answerContainer.style.maxHeight = "0";
});
}
</script>
</body>
</html>
Terms of Use
If you want to use this Code in your posts, please don't remove the
attributes from the codes, it will not be visible on your website.
If you want to rewrite an article on this Codebox by using these codes, you
must add a Reference with visible and clickable link redirecting to our
website: https://www.rameezimdad.blogspot.com. If you rewrite without
Reference, Legal Actions will be taken.
Conclusion
This is all about to help uou to Automate Your Business. I hope you enjoy
this article. Please do share this article. And if you are facing problem in
any section or you have any question then ask us in comment box. Thank
you!