Height issue with CSS Accordion FAQ

Question

I'm using this a link accordion menu to create a FAQ. Problem is that height is fixed, so whenever text is too long (or on mobile devices), text is cut us.

I've tried to use height: auto, overflow: hidden; min-height, !important and all the tags to make the height responsive, but whenever I do this, If I click on the tabs, the scrolling accordion effect doesn't work or it jumps to top page.

How can I solve this? I'd prefer not using JS or Jquery...thanks!

Here's the css

  .ac-container input:checked ~ article.ac-small {
height: 140px;

}

Answer 1

The solution you use is CSS only. A CSS3 animation needs a defined height value to generate the transition – that's why the solution you used offers 3 different predefined heights.

Another approach would be to use the max-height-trick which works for linear animations only though.

The most common solution would be to toggle the animation via jQuery's slidetoggle().

Answer 2

All you need to do is Setting height:auto for the below property.

.ac-container input:checked ~ article.ac-small {
    height: auto;
}

which is the one deciding height of the according body.

Plese find the link for the updated code.