Accordion/toggle for FAQs - free

Greetings all,  Is there any means to do
an accordion/toggle style for FAQs or other drop-down content?
they all seem to require the css/code insert
-  so this would only be accessible 
if you are on a business plan or higher. 
 

thoughts, as this is already over budget?

thank you
B
[ avenue template ]

This code for Personal Plan

Add Code Block > Insert this

<div class="t-accordion">
    <div class="container">
        <div class="column">
            <div>
            <!-- Accordion 01 -->
            <label class="accordion">
            <input type="checkbox" name="checkbox-accordion">
            <div class="accordion__header">Lorem ipsum dolor sit amet</div>
            <div class="accordion__content">
            <h6>Lorem ipsum dolor sit amet,</h6>
            <p>Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
            </label>
            <!-- Accordion 02 -->
            <label class="accordion">
            <input type="checkbox" name="checkbox-accordion">
            <div class="accordion__header">Lorem ipsum dolor sit amet</div>
            <div class="accordion__content">
            <h6>Lorem ipsum dolor sit amet,</h6>
            <p>Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
            </label>
            <!-- Accordion 03 -->
            <label class="accordion">
            <input type="checkbox" name="checkbox-accordion">
            <div class="accordion__header">Lorem ipsum dolor sit amet</div>
            <div class="accordion__content">
            <h6>Lorem ipsum dolor sit amet,</h6>
            <p>Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
            </label>
            </div>
        </div>
    </div>
</div>

Add to Home > Design > Custom CSS

.t-accordion {
h1, h2, h3, h4, h5, h6 {
  font-weight: 800;
}

p {
  color: black;
  font-size: 14px;
}

.container {
  display: table;
  margin: 0 auto;
  width: 80%;
}

.column {
  display: table-cell;
  padding: 0px 10px;
  width: 50%;
}

h2 {
  color: #1abc9c;
  text-align: center;
  margin: 20px 0;
}

.accordion {
  display: block;
  font-size: inherit;
  margin: 0px;
  position: relative;
}

.accordion input {
  display: none;
  position: absolute;
  visibility: hidden;
  left: 50%;
  top: 50%;
  z-index: 1;
}

.accordion__header {
  background-color: #1abc9c;
  border: 1px solid #15967d;
  border-bottom-width: 0px;
  color: #10715e;
  cursor: pointer;
  transition: background 0.2s;
  padding: 20px;
  position: relative;
  z-index: 2;
}
.accordion__header:hover {
  background-color: #17a98c;
  color: white;
}
.accordion__header:hover:before, .accordion__header:hover:after {
  background-color: white;
}
.accordion__header:before, .accordion__header:after {
  background-color: #10715e;
  content: '';
  display: block;
  position: absolute;
  z-index: 3;
}
.accordion__header:before {
  height: 2px;
  margin-top: -1px;
  top: 50%;
  right: 20px;
  width: 8px;
}
.accordion__header:after {
  height: 8px;
  margin-top: -4px;
  top: 50%;
  right: 23px;
  width: 2px;
}
.accordion input:checked ~ .accordion__header {
  background: #15967d;
  border-color: #15967d;
  color: white;
}
.accordion input:checked ~ .accordion__header:hover {
  background-color: #2ca18a;
  border-color: #15967d;
  color: white;
}
.accordion input:checked ~ .accordion__header:before {
  background-color: white;
}
.accordion input:checked ~ .accordion__header:after {
  display: none;
}
.accordion:first-child .accordion__header {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.accordion:last-child .accordion__header {
  border-bottom-width: 1px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}
.accordion:last-child input:checked ~ .accordion__header {
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}

.accordion__content {
  background-color: white;
  border: 1px solid #1abc9c;
  border-width: 0px 1px;
  display: none;
  padding: 20px;
}
.accordion input:checked ~ .accordion__content {
  display: block;
}
.accordion:last-child .accordion__content {
  border-bottom-width: 1px;
  border-radius: 0px 0px 4px 4px;
}
.accordion__content h6 {
  color: #1abc9c;
  font-size: 18px;
  margin-bottom: 5px;
}
}

@tuanphan This is really cool – thank you for sharing. Is there a version of this code where only one accordion section can be open at one time?

On 3/13/2021 at 7:52 PM, e_robertson said:

@tuanphan This is really cool – thank you for sharing. Is there a version of this code where only one accordion section can be open at one time?

I'm afraid this is not possible in Personal Plan