How to add a FAQ in Unbounce

Unlock the power of FAQ in Unbounce with these four simple steps. By following my easy instructions, you’ll seamlessly integrate a slider into your project.

I’ve already created the FAQ, and you can find the ready-to-use code below. Now, let’s dive into the steps to effortlessly incorporate this dynamic feature into any Unbounce project of your choice.

Step 1:

Insert HTML element in your project & place it according to your need

Paste the following code into your HTML element and click “Save Code”

<dl class="ub-accordion collapsable">
            <dt onclick="toggleAccordion()" class="expanded">What illnesses and diseases can mold cause?</dt>
            <dd>A mold infestation can lead to numerous health problems, including allergies, asthma, and respiratory
                problems. Unchecked mold growth will worsen these conditions if the building’s occupants already have
                them. Some people are just sensitive to molds and will get a stuffy nose, start wheezing, or develop
                itchy eyes or skin. There’s no two ways about it - mold is seriously bad for your health.</dd>

            <dt onclick="toggleAccordion()">What does mold smell like?</dt>
            <dd>Mold odor can vary and depends on which compounds the specific mold releases into the air. The compounds
                are called Microbial Volatile Organic Compounds (mVOCs) and tend to produce a musty, damp smell.</dd>

            <dt onclick="toggleAccordion()">What is the biggest trigger for mold growth?</dt>
            <dd>The biggest trigger is water, whether that’s flood damage, saturation following a building fire, a slow
                leak in the property, or simply humidity levels that are too high. You’ll never get rid of the mold
                until you fix the unwanted water or moisture source. Fortunately, Omega’s expert team has years of
                experience and will find even the most hidden water leaks.</dd>

            <dt onclick="toggleAccordion()">How quickly does mold start growing in water-damaged or wet areas in a
                property?</dt>
            <dd>Wet areas must be dried, and the water source, if it continues, closed down within 24-48 hours. Yes,
                mold starts growing that quickly!</dd>

            <dt onclick="toggleAccordion()">Can I tackle mold removal and remediation myself?</dt>
            <dd>Many householders underestimate the impact of mold growth because you can’t always see it or the extent
                of it. Consequently, it’s not unusual for Omega to be called in when things get out of hand, and often,
                that’s because someone tried to do the job before and only did half a job. Instead of removing the mold,
                that person has just caused it to spread. Mold removal requires expert equipment and techniques; plus,
                it’s unsafe to tackle if you don’t know what you’re doing.</dd>
        </dl>

Step 2:

Add a stylesheet from the bottom menu in your project

Paste the Following CSS and click “Done”

<style>
.ub-accordion{
   font-family: "Titillium Web" !important;
}

    .ub-accordion dt {
        font-size: 20px;
        line-height: 31px;
        font-weight: 600;
    }

    .ub-accordion dd {
        font-size: 16px;
        line-height: 29px;
        color: #6e777d;
    }

    dt {
        padding: 20px 10px;
        color: #231F20;
        border-bottom: 1px solid #6e777d;
        user-select: none;
        -webkit-user-select: none;
        cursor: pointer;
        transition: 0.1s;
    }

    dt:after {
        content: '\002B';
        color: #231F20;
        float: right;
    }

    dt:hover {
        color: #D0B86F;
    }

    dt.expanded {
        border-bottom: 1px solid #E9E9E9;
        color: #D0B86F;
    }

    dt.expanded:after {
        content: "\2212";
        color: #D0B86F;
        float: right;
    }

    dt.expanded:hover {
        color: #D0B86F;
    }

    dd {
        display: none;
        padding: 10px;
        margin: 0;
    }
@media only screen and (max-width: 600px) {
.ub-accordion dt {
            font-size: 16px;
            line-height: 26px;
        }

        .ub-accordion dd {
            font-size: 14px;
            line-height: 22px;
            max-height: 300px;
        }

        dt {
            padding: 10px 4px;
        }
  }
</style>

Step 3:

Add a javascript file & name it accordion-faq.

Paste the following code and click “Done”

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
    var speed = 300
        $('.ub-accordion dt.expanded + dd').slideDown(speed)

        $('.ub-accordion dt').on('click', function () {
            var that = $(this)


            // Expandable
            if (that.parent().hasClass('collapsable')) {

                if (!that.hasClass('expanded')) {
                    that.siblings('dt').removeClass('expanded').next('dd').slideUp(speed)
                }

                that.toggleClass('expanded').next('dd').slideToggle(speed)
            }

        })
</script>

If you now save your progress and go to preview you will see something like this

With that, you have successfully inserted the slider in your project. You can customize the code as you want. Hope you like the tutorial. If you have any confusion let me know in the comment section