This landing page was created with an Ontraport sandbox account.

Here is answer 1

Here is answer 2

Here is answer 3

HTML

Put this in a Custom HTML element, and edit the content with your own questions and answers.

<div class="faq-container">
<div class="faq-item">
<button class="faq-question">Here is question 1</button>
<div class="faq-answer">Here is answer 1</div>
</div>
<div class="faq-item">
<button class="faq-question">Here is question 2</button>
<div class="faq-answer">Here is answer 2</div>
</div>
<div class="faq-item">
<button class="faq-question">Here is question 3</button>
<div class="faq-answer">Here is answer 3</div>
</div>
</div>
<script src="script.js"></script>

CSS

Put this in Page settings > Custom code > Header

<style>
body {
font-family: Arial, sans-serif;
}

.faq-container {
width: 100%;
max-width: 600px;
margin: 0 auto;
}

.faq-item {
margin-bottom: 1px;
}

.faq-question {
width: 100%;
background-color: #f1f1f1;
border: none;
outline: none;
cursor: pointer;
padding: 12px;
text-align: left;
font-size: 18px;
transition: background-color 0.3s, color 0.3s;
}

.faq-question:hover {
background-color: #000;
color: #fff;
}

.faq-question.open {
background-color: #000;
color: #fff;
}

.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out, padding-top 0.3s ease-out, padding-bottom 0.3s ease-out;
background-color: #fff;
padding: 0 12px;
position: relative;
}

.faq-answer.open {
padding-top: 10px;
padding-bottom: 10px;
}
</style>

Javascript

Put this in Page settings > Custom code > Footer

<script>
document.addEventListener('DOMContentLoaded', () => {
const faqQuestions = document.querySelectorAll('.faq-question');

faqQuestions.forEach((question) => {
question.addEventListener('click', (e) => {
const faqItem = e.target.parentElement;
const faqAnswer = faqItem.querySelector('.faq-answer');

// Close all other open answers and questions
document.querySelectorAll('.faq-answer').forEach((answer) => {
if (answer !== faqAnswer) {
answer.style.maxHeight = null;
answer.classList.remove('open');
answer.previousElementSibling.classList.remove('open');
}
});

// Toggle the clicked answer and question
if (faqAnswer.style.maxHeight) {
faqAnswer.style.maxHeight = null;
faqAnswer.classList.remove('open');
e.target.classList.remove('open');
} else {
faqAnswer.style.maxHeight = `${faqAnswer.scrollHeight + 20}px`;
faqAnswer.classList.add('open');
e.target.classList.add('open');
}
});
});
});
</script>