diff --git a/landing/keyserver-faq.css b/landing/keyserver-faq.css
--- a/landing/keyserver-faq.css
+++ b/landing/keyserver-faq.css
@@ -37,12 +37,12 @@
 }
 
 .answerContainer {
-  max-height: 0;
+  transition: 500ms max-height;
   overflow: hidden;
 }
 
 .activeAnswerContainer {
-  max-height: fit-content;
+  transition: 500ms max-height;
 }
 
 .answerText {
diff --git a/landing/keyserver-faq.react.js b/landing/keyserver-faq.react.js
--- a/landing/keyserver-faq.react.js
+++ b/landing/keyserver-faq.react.js
@@ -18,6 +18,21 @@
   const answerClassName = classNames([typography.paragraph1, css.answerText]);
 
   const [activeFAQIndex, setActiveFAQIndex] = React.useState(null);
+  const faqAnswerRefs = React.useRef([]);
+
+  React.useEffect(() => {
+    faqAnswerRefs.current.forEach((answerRef, index) => {
+      if (!answerRef) {
+        return;
+      }
+
+      if (index === activeFAQIndex) {
+        answerRef.style.maxHeight = `${answerRef.scrollHeight}px`;
+      } else {
+        answerRef.style.maxHeight = '0';
+      }
+    });
+  }, [activeFAQIndex]);
 
   const onClickFAQItem = React.useCallback(
     (index: number) => {
@@ -51,7 +66,10 @@
               icon={faChevronDown}
             />
           </div>
-          <div className={answerContainerClassName}>
+          <div
+            ref={el => (faqAnswerRefs.current[index] = el)}
+            className={answerContainerClassName}
+          >
             <p className={answerClassName}>{faq.answer}</p>
           </div>
         </div>