Want an FAQ Accordion for your Ontraport page? Here is the step by step guide on how to add a pure HTML and CSS accordion in Ontraport page.

Adding an accordion to your Ontraport page can help organize your content and make it more user-friendly. An accordion is a user interface element that allows users to expand and collapse sections of content. In this blog post, I will show you how to add an accordion to your Ontraport page using the code provided.

Before we start, make sure that you are familiar with HTML and CSS. Also, please note that the code provided is for demonstration purposes only, and you may need to modify it to suit your specific needs.

Let's get started.

Check Out the Demo Ontraport Page

Here is what the output will look like when you implement this code.

Ontraport Accordion Demo

Step 1: Add the Code

First, add an Custom HTML element onto your ontraport page

Copy the code provided below and paste it into the HTML section of your Ontraport page.

<style>
  
  *, *::after, *::before{
  margin: 0;
  padding: 0;
  box-sizing:border-box;
}

body{
  font-family: "Poppins", sans-serif;
}

div.c{
  position: relative;
  margin:.25em;
}

input{
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  opacity:0;
  visibility: 0;
}

h1{
  background:steelblue;
  color:white;
  padding:.5em;
  position: relative;
}

label::before{
  content:"";
  display: inline-block;
  border: 15px solid transparent;
  border-left:20px solid white;
}

label{
  font-size:.5em;
  color:white;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
}

div.p{
  max-height:0px;
  overflow: hidden;
  transition:max-height 0.5s;
  background-color: white;
  box-shadow:0 0 10px 0 rgba(0, 0, 0, 0.2);
}

div.p p {
  padding:2em;
}

input:checked ~ h1 label::before{
  border-left:15px solid transparent;
  border-top:20px solid white;
  margin-top:12px;
  margin-right:10px;
}

input:checked ~ h1 ~ div.p{
  max-height:100px;
}

a{
  color:steelblue;
}
  
</style>

<div class="c">
  <input type="checkbox" id="faq-1">
  <h1><label for="faq-1">FAQ 1</label></h1>
  <div class="p">
    <p>This is the answer for your FAQ 1</p>
  </div>
</div>
<div class="c">
  <input type="checkbox" id="faq-2">
  <h1><label for="faq-2">FAQ 2</label></h1>
  <div class="p">
    <p>This is the answer for your FAQ 2</p>
  </div>
</div>
<div class="c">
  <input type="checkbox" id="faq-3">
  <h1><label for="faq-3">FAQ 3</label></h1>
  <div class="p">
    <p>This is the answer for your FAQ 3. Check out Instructions at DaMarTech Blog <a href="https://damartech.com/ontraport-accordion/">link to article</a>
    </p>
  </div>
</div>

Step 2: Customize the Code

Customize the code to suit your needs. You can change the text in the labels and the content of the answers to your frequently asked questions. You can also change the color scheme by modifying the CSS.

To add a new question, find the code that looks similar to this

 <h1><label for="faq-1">FAQ 1</label></h1>

and replace FAQ1 with your question.

To add answer to that question, look for a code similar to this

<div class="p">
    <p>This is the answer for your FAQ 1</p>
  </div>

and replace "This is the answer for your FAQ 1" with your answer.

To Add a new FAQ block, add a code block similar to this

<div class="c">
  <input type="checkbox" id="faq-1">
  <h1><label for="faq-1">FAQ 1</label></h1>
  <div class="p">
    <p>This is the answer for your FAQ 1</p>
  </div>
</div>

and update the id, Question and Answer.

Step 3: Preview Your Accordion

You can preview the code first. Then Preview your accordion by clicking on the Preview button at the top of the Ontraport page editor. You should be able to see your frequently asked questions with collapsible answers.

Step 4: Publish Your Page

If you are satisfied with the accordion, click on the Publish button to make it live on your Ontraport page.

Congratulations, you have successfully added an accordion to your Ontraport page.

In summary, an accordion can help organize your content and make it more user-friendly. By using the code provided in this blog post, you can easily add an accordion to your Ontraport page.

Remember to customize the code to suit your specific needs and preview your accordion before publishing your page.

Hope this helps.

If you have a better Accordion code for Ontraport, feel free to share it in the comments. Thank you.