Hi @Ena_Bigayan it can be done with some custom code. You need a combo of HTL/CSS/JS to accomplish this.

I put this together real quick to show you http://unbouncepages.com/lp-interaction-test/ you can style any way you want.

HTML

A Collapsible:

<p>Collapsible Set:</p>

<button type="button" class="collapsible">Open Section 1</button>

<div class="content">

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

</div>

<button type="button" class="collapsible">Open Section 2</button>

<div class="content">

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

</div>

<button type="button" class="collapsible">Open Section 3</button>

<div class="content">

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

</div>

CSS



.collapsible {

background-color: #777;

color: white;

cursor: pointer;

padding: 18px;

width: 100%;

border: none;

text-align: left;

outline: none;

font-size: 15px;

}

.active, .collapsible:hover {

  background-color: #555;

}



.content {

  padding: 0 18px;

  display: none;

  overflow: hidden;

  background-color: #f1f1f1;

}

</style>

JS



var coll = document.getElementsByClassName(“collapsible”);

var i;

for (i = 0; i < coll.length; i++) {

  collci].addEventListener("click", function() {

    this.classList.toggle("active");

    var content = this.nextElementSibling;

    if (content.style.display === "block") {

      content.style.display = "none";

    } else {

      content.style.display = "block";

    }

  });

}

</script>

Hope that helps!

Hi, @digibomb . Thank you so much for the code and for putting it together to show an example. Unfortunately, I am not a developer and I don’t know where to put the specific codes on Unbounce. But still, thank you.

Hey, @Ena_Bigayan no worries. This is really simple to do even if you are not a developer.

I put this video together to help you get started. If you have any questions let me know.

Hey man, what up?? So, I tried make this code run but i don´t know where I put the anothers code what you don´t show on this video, can you explain it?

I added all the code but it’s still not showing when clicked. I tested on a fresh page with your exact html, css and java. =(

Hey @OpenMoves I’m sure you don’t need the solution 1 year later, but I am posting it here for anyone else who comes across this!
In @digibomb ’s JavaScript code snippet, the class name "collapsible" is enclosed in curly quotation marks (“ ”) instead of regular double quotation marks (" "). JavaScript recognises regular double quotation marks as string delimiters, whereas curly quotation marks may not be recognised properly

To fix the issue, replace the curly quotation marks with regular double quotation marks in the JavaScript code. Here's the corrected code:

var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll{i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}