Hide related software articles behind an expandable element

Author: PabloG02

src/app/features/containers/pages/container/container.component.css

@@ -458,14 +458,24 @@ table th {
 .software-item {
   border: 1px solid rgba(var(--main-font-color), 0.2);
   border-radius: 8px;
-  padding: 16px;
+  padding: 0;
   background-color: rgb(var(--color-surface-container-lowest));
   transition: border-color 0.2s, box-shadow 0.2s;
 
   &:hover {
     border-color: rgba(var(--picton-blue-600), 0.4);
     box-shadow: 0 2px 8px rgba(var(--picton-blue-600), 0.1);
   }
+
+  & summary {
+    list-style: none;
+    cursor: pointer;
+    user-select: none;
+
+    &::-webkit-details-marker {
+      display: none;
+    }
+  }
 }
 
 :host-context(.dark) .software-item:hover {
@@ -477,9 +487,25 @@ table th {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  gap: 12px;
+  padding: 16px;
+
+  .chevron-icon {
+    transition: transform 0.2s;
+    flex-shrink: 0;
+  }
+}
+
+.software-item[open] .software-info .chevron-icon {
+  transform: rotate(180deg);
+}
+
+.software-name-wrapper {
+  display: flex;
+  align-items: center;
   flex-wrap: wrap;
   gap: 12px;
-  margin-bottom: 12px;
+  flex: 1;
 }
 
 .software-name {
@@ -522,6 +548,8 @@ table th {
   flex-direction: column;
   flex-wrap: wrap;
   gap: 8px;
+  padding: 0 16px 16px 16px;
+  margin-top: 8px;
 }
 
 .article-link {

src/app/features/containers/pages/container/container.component.html

@@ -280,25 +280,28 @@ <h3>Software that co-occurs with {{ container!.name }} in Bio-Protocol articles<
     </div>
     <div class="related-software-list">
       @for (software of getSortedRelatedSoftware(); track software.name) {
-        <div class="software-item">
-          <div class="software-info">
-            @if (software.inBdip) {
-              <a [routerLink]="['/container', software.name]" class="software-name bdip-link">
-                {{ software.displayName }}
-              </a>
-            } @else {
-              <span class="software-name">{{ software.displayName }}</span>
-            }
-            <span class="cooccurrence-count">{{ software.count }} {{ software.count === 1 ? 'article' : 'articles' }}</span>
-          </div>
+        <details class="software-item">
+          <summary class="software-info">
+            <div class="software-name-wrapper">
+              @if (software.inBdip) {
+                <a [routerLink]="['/container', software.name]" class="software-name bdip-link" (click)="$event.stopPropagation()">
+                  {{ software.displayName }}
+                </a>
+              } @else {
+                <span class="software-name">{{ software.displayName }}</span>
+              }
+              <span class="cooccurrence-count">{{ software.count }} {{ software.count === 1 ? 'article' : 'articles' }}</span>
+            </div>
+            <svg-icon src="assets/icons/fluent-icons/ic_fluent_chevron_down_24_regular.svg" svgClass="chevron-icon" />
+          </summary>
           <div class="article-links">
             @for (articleId of getCooccurringArticles(software.name); track articleId) {
               <a [href]="getBioProtocolArticleUrl(articleId)" target="_blank" class="article-link">
                 {{ getBioProtocolArticleTitle(articleId) }}
               </a>
             }
           </div>
-        </div>
+        </details>
       }
     </div>
   </div>