feat(topics): Allow only a single featured topic open at a time

Sefaria · Feb 7, 2024 · 87e867b · 87e867b
1 parent cb69bdf
commit 87e867b
Showing 1 changed file with 15 additions and 3 deletions.
diff --git a/static/js/Story.jsx b/static/js/Story.jsx
@@ -72,11 +72,23 @@ SheetListStory.propTypes = {
 // todo: if we don't want the monopoly card effect, this component isn't needed.    // style={{"borderColor": cardColor || "#18345D"}}>
 
 // todo: if we don't want the monopoly card effect, this component isn't needed.    // style={{"borderColor": cardColor || "#18345D"}}>
-const StoryFrame = ({cls, cardColor, collapsibleSummary, children}) => (
+const StoryFrame = ({cls, cardColor, collapsibleSummary, children}) => {
+
+const handleDetailOpen = (target) => {
+  const targetDetail = (target.closest("details"))
+  const details = document.querySelectorAll('details');
+  details.forEach((detail) => {
+      if (detail !== targetDetail) {
+          detail.removeAttribute("open");
+      }
+  });
+}
+
+return (
      <div className={'story ' + cls}>
-        {collapsibleSummary ? (<details><summary>{collapsibleSummary}</summary>{children}</details>) : children }
+        {collapsibleSummary ? (<details><summary onClick={(e)=>{handleDetailOpen(e.target)}}>{collapsibleSummary}</summary>{children}</details>) : children }
      </div>
-);
+)};
 StoryFrame.propTypes = {
     cls:        PropTypes.string,   // Story type as class name
     cardColor:  PropTypes.string,