Hi @Cameron_R,

Is it possible - yes.

You have a couple of options:

1. 
   

   Insert your FAQ section as an HTML element. Create the code outside of Unbounce and just use it on the page. You’ll have to leave enough room for the content to be able to expand properly.

   
   


2. 
   

   Custom code it with Unbounce elements. I highly discourage this but it’s an option and it’s possible. My agency has done it once or twice for clients but it takes wayyyyyy to long to do properly and in most cases it’s not worth the time investment and cost.

   
   

Best,

Hristian

Thanks appreciate it, i’ll look into the first option now.

Would you happen to have a link to point me in the right direction of where I could find a collapsible HTML element.

Thanks

Hi @Cameron_R

Use the below HTML, CSS & JS in Unbounce. Then customize the code to achieve your desired collapsible box.

HTML

<ul class="accordion">

<li>

    <a>LOREM IPSUM DOLOR SIT AMET</a>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, ipsum, fuga, in, obcaecati magni ullam nobis voluptas fugiat tenetur voluptatum quas tempora maxime rerum neque deserunt suscipit provident cumque et mollitia ex aspernatur porro minus sapiente voluptatibus eos at perferendis repellat odit aliquid harum molestias ratione pariatur adipisci. Aliquid, iure.</p>

</li>

<li>

    <a>LOREM IPSUM DOLOR SIT AMET</a>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, ipsum, fuga, in, obcaecati magni ullam nobis voluptas fugiat tenetur voluptatum quas tempora maxime rerum neque deserunt suscipit provident cumque et mollitia ex aspernatur porro minus sapiente voluptatibus eos at perferendis repellat odit aliquid harum molestias ratione pariatur adipisci. Aliquid, iure.</p>

</li>

<li>

    <a>LOREM IPSUM DOLOR SIT AMET</a>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, ipsum, fuga, in, obcaecati magni ullam nobis voluptas fugiat tenetur voluptatum quas tempora maxime rerum neque deserunt suscipit provident cumque et mollitia ex aspernatur porro minus sapiente voluptatibus eos at perferendis repellat odit aliquid harum molestias ratione pariatur adipisci. Aliquid, iure.</p>

</li>

<li>

    <a>LOREM IPSUM DOLOR SIT AMET</a>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, ipsum, fuga, in, obcaecati magni ullam nobis voluptas fugiat tenetur voluptatum quas tempora maxime rerum neque deserunt suscipit provident cumque et mollitia ex aspernatur porro minus sapiente voluptatibus eos at perferendis repellat odit aliquid harum molestias ratione pariatur adipisci. Aliquid, iure.</p>

</li>

CSS

<style>

.accordion li {

border-bottom: 1px solid #D0E7F8;

position: relative;

list-style: none;

}

.accordion li p {

display: none;

padding: 10px 13px 40px;

color: #465151 !important;

font-size: 19px !important;

line-height: 30px !important;

}

.accordion a {

width: 100%;

display: block;

cursor: pointer;

font-weight: bold;

line-height: 94px;

text-indent: 14px;

user-select: none;

color: #354B57 !important;

font-size: 20px !important;

}

.accordion a:after {

width: 0;

color: #09CAC0;

height: 0;

position: absolute;

right: 28px;

content: “+”;

top: 0;

-webkit-transition: all 0.2s ease-in-out;

-moz-transition: all 0.2s ease-in-out;

transition: all 0.2s ease-in-out;

font-size: 34px;

font-weight: normal !important;

}

.accordion p {

font-size: 13px;

font-size: 0.8125rem;

line-height: 2;

padding: 10px;

}

a.active:after {

-webkit-transition: all 0.2s ease-in-out;

-moz-transition: all 0.2s ease-in-out;

transition: all 0.2s ease-in-out;

content: “-”;

}

JS

<script>

(function() {
(’.accordion > li:eq(0) a’).addClass(‘active’).next().slideDown();

$('.accordion a').click(function(j) {

    var dropDown = $(this).closest('li').find('p');





    $(this).closest('.accordion').find('p').not(dropDown).slideUp();





    if ($(this).hasClass('active')) {

        $(this).removeClass('active');

    } else {

        $(this).closest('.accordion').find('a.active').removeClass('active');

        $(this).addClass('active');

    }





    dropDown.stop(false, true).slideToggle();





    j.preventDefault();

});

})(jQuery);

Hi Rohulamin,

I have tried to get this to work but can’t get it working - Have you managed to get this to work on an Unbounce page before?

I know this is asking a lot but if you have would you be able to download that page and send it to me?

Thanks,