Page MenuHomePhabricator
Files F3408910

D8095.id27446.diff
No OneTemporary
Actions

D8095.id27446.diff
View Options

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>

File Metadata

Mime Type
text/plain
Expires
Thu, Dec 5, 2:23 PM (18 h, 1 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2617208
Default Alt Text
D8095.id27446.diff (1 KB)

Event Timeline