How To Make A Collapsible Box?

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

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);