diff --git a/gcp/appengine/frontend3/src/styles.scss b/gcp/appengine/frontend3/src/styles.scss
index 3322757bda8..d28c391f5e1 100644
--- a/gcp/appengine/frontend3/src/styles.scss
+++ b/gcp/appengine/frontend3/src/styles.scss
@@ -867,6 +867,11 @@ dl.vulnerability-details,
}
}
+.showmore {
+ cursor: pointer;
+ font-weight: bold;
+}
+
/** Home page */
.wrapper.decorated {
diff --git a/gcp/appengine/frontend3/src/templates/vulnerability.html b/gcp/appengine/frontend3/src/templates/vulnerability.html
index 3cf93fa10e7..1648b937697 100644
--- a/gcp/appengine/frontend3/src/templates/vulnerability.html
+++ b/gcp/appengine/frontend3/src/templates/vulnerability.html
@@ -38,7 +38,7 @@
{{ vulnerability.id }}
{% if vulnerability.related -%}
Related
-
+
{% for related in vulnerability.related -%}
-
{% if related | osv_has_vuln -%}
@@ -242,5 +242,36 @@
header.click()
});
})
+
+ const EXPANDIBLE_LIST_DEFAULT_LENGTH = 5
+
+ const expandible_lists = document.querySelectorAll('.expandible-list')
+ expandible_lists.forEach((list) => {
+ const items = list.getElementsByTagName('li')
+ const is_expanded = list.classList.contains('expanded');
+
+ if (items.length <= EXPANDIBLE_LIST_DEFAULT_LENGTH) {
+ return
+ }
+
+ const expandible_items = [...items].slice(EXPANDIBLE_LIST_DEFAULT_LENGTH)
+ expandible_items.forEach((item)=>{
+ item.style.display = is_expanded ? 'block' : 'none'
+ });
+
+ const toggle_button = document.createElement('span');
+ toggle_button.classList.add('showmore');
+ toggle_button.textContent = is_expanded ? 'Show Less' : 'Show More';
+ list.append(toggle_button)
+
+ 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');
+ });
+ });
{% endblock -%}
\ No newline at end of file