Solved

Collapsible text box for FAQs

  • 29 April 2021
  • 6 replies
  • 407 views
Ena_Bigayan

image

does anyone know how to do something similar to the image above? When clicked on the text, the answer would appear then close once clicked again.

Thanks.

icon

Best answer by digibomb 4 May 2021, 15:50

View original

6 replies

digibomb
Userlevel 6
Badge +1

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:


Open Collapsible

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>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++) {
  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";
    }
  });
}
</script>

Hope that helps!

Ena_Bigayan

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.

digibomb
Userlevel 6
Badge +1

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.

csar

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?

O

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. =(

S

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

 

Reply


Terms & ConditionsCookie settings