My accordian menu doesnt accomodate the extra text?

I made an accordian menu using html css and javascript. The problem is that almost all the tutorials online suggest to give a fixed height to the revealed text div. This doesnt work with the larger texts. On setting the height in percentages , transition effects dont work.

The relevant codepen is shared here:

Add the following css rules to your css file:

::-webkit-scrollbar {
    width: 5px;
  background-color: gray;
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);

::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;

Also, change the overflow property to auto here:

.accordion .content-container .answer{
    line-height: 1.5;
    font-size: 1.5rem;
    height: 0;
    overflow: auto; ......HERE!
    transition:0.4s ;

You can now scroll through the text in each text div:

Good luck on your project.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.