Collapse fields on vulnerability page when it's too long (#2223)

Issue: #2216

Result:
![May-21-2024
15-13-51](https://github.com/google/osv.dev/assets/13760813/3a1fe591-11ae-41d0-9c5e-0f37b8912afd)

Does not render a toggle button if it's a short list:
<img width="813" alt="image"
src="https://github.com/google/osv.dev/assets/13760813/d075284f-fe6a-429e-b994-f4828b58a72e">

gcp/appengine/frontend3/src/styles.scss

@@ -912,6 +912,11 @@ dl.vulnerability-details,
   }
 }
 
+.showmore {
+	cursor: pointer;
+	font-weight: bold;
+}
+
 /** Home page */
 
 .wrapper.decorated {

gcp/appengine/frontend3/src/templates/vulnerability.html

@@ -53,7 +53,7 @@ <h1 class="title">
           {% if vulnerability.related -%}
           <dt>Related</dt>
           <dd>
-            <ul class="aliases">
+            <ul class="aliases expandible-list">
               {% for related in vulnerability.related -%}
               <li>
                 {% if related | osv_has_vuln -%}
@@ -303,17 +303,51 @@ <h3 class="mdc-layout-grid__cell--span-3">
 </turbo-stream>
 
 <script>
-  /*
-  We use `spicy-section` to make the packages content collapsible for mobile view,
-  but the issue is it collapse the content by default but we want to expaneded after
-  the page is loaded. So we decide to programmatically click on header of collapsed
-  packages after the page is loaded, and the content will be visible.
-  */
   document.addEventListener('turbo:load', function() {
+    /*
+    We use `spicy-section` to make the packages content collapsible for mobile view,
+    but the issue is it collapse the content by default but we want to expaneded after
+    the page is loaded. So we decide to programmatically click on header of collapsed
+    packages after the page is loaded, and the content will be visible.
+    */
     const package_headers = document.querySelectorAll('.package-header[affordance="collapse"][aria-expanded="false"]')
     package_headers.forEach((header) => {
       header.click()
     });
-  })
+
+    /*
+    Collapse fields if they have too many items. You can enable this feature by adding
+    an 'expandible-list' class to lists with long value.
+    */
+    const EXPANDIBLE_LIST_DEFAULT_LENGTH = 5
+    const expandible_lists = document.querySelectorAll('.expandible-list:not(expanded):not([data-has-toggle-btn])')
+    expandible_lists.forEach((list) => {
+      const items = list.getElementsByTagName('li')
+
+      if (items.length <= EXPANDIBLE_LIST_DEFAULT_LENGTH) {
+        return
+      }
+
+      const expandible_items = [...items].slice(EXPANDIBLE_LIST_DEFAULT_LENGTH)
+      expandible_items.forEach((item)=>{
+        item.style.display = 'none'
+      });
+
+      const toggle_button = document.createElement('span');
+      toggle_button.classList.add('showmore');
+      toggle_button.textContent = 'Show More';
+      list.append(toggle_button)
+      list.setAttribute("data-has-toggle-btn", true);
+
+      toggle_button.addEventListener("click", function() {
+        const is_expanded = list.classList.contains('expanded');
+        expandible_items.forEach((item)=>{
+          item.style.display = is_expanded ? 'none' : 'block'
+        });
+        toggle_button.textContent = is_expanded ? 'Show More' : 'Show Less'
+        list.classList.toggle('expanded');
+      });
+    });
+  });
 </script>
 {% endblock -%}