diff --git a/style-guide/doc/layout/attribute-fields.html b/style-guide/doc/layout/attribute-fields.html index bfa277a24e..9e80bb6db2 100644 --- a/style-guide/doc/layout/attribute-fields.html +++ b/style-guide/doc/layout/attribute-fields.html @@ -2,467 +2,116 @@
- -
- -
- + - + + + + + + + + + + + + + - + + + + + + +
Attributes
Attribute NameAttribute Name Value Unit Actions
MD5 checksum + ef4d6433dfd 78de1023e3d040f2c8c3fef4d6433dfd78de10... + + + + + +
+ + +
+
commentLorem Ipsum +
+ + +
+
age1012 time unit
@@ -470,7 +119,71 @@ class="btn btn-link js-delete" name="delete_file_attr" data-test="delete-attr-btn" - data="370375" + data="674769" + > + Delete + +
+
comment + This is a very long comment that needs a larger te... + + + + + +
+ + @@ -479,8 +192,498 @@
+
+ +
+
- diff --git a/style-guide/js/sg-scripts.js b/style-guide/js/sg-scripts.js index 18459bc629..5c92bf2c07 100755 --- a/style-guide/js/sg-scripts.js +++ b/style-guide/js/sg-scripts.js @@ -132,4 +132,23 @@ document.addEventListener("DOMContentLoaded", function () { "aria-required": (!isExpanded).toString(), }); }); + + function handleBtnClick(id) { + $(`.js-desc-${id}`).click(function (e) { + e.preventDefault(); + var id = $(this).attr("data-id"); + var isExpanded = $(this).attr("aria-expanded") === "true"; + + $(this) + .text(isExpanded ? "+" : "-") + .attr("aria-label", isExpanded ? "Show more" : "Show less") + .attr("aria-expanded", !isExpanded); + + $(".js-short-" + id).toggle(); + $(".js-long-" + id).toggle(); + }); + } + + handleBtnClick("attr_value_12467"); + handleBtnClick("attr_value_674770"); }) \ No newline at end of file