From 1974005e2a0fb16f940b3733e8b11809abaa3de0 Mon Sep 17 00:00:00 2001
From: "sameed.ahmad" <sameed.ahmad@siemens-healthineers.com>
Date: Fri, 18 Aug 2023 13:16:34 +0530
Subject: [PATCH] feat(ui): Added collapse and expand icon for all the tabs

Signed-off-by: sameed.ahmad <sameed.ahmad@siemens-healthineers.com>
---
 .../includes/components/summary.jspf          | 48 ++++++++++++++--
 .../includes/releases/clearingDetails.jspf    | 56 ++++++++++++++++---
 .../includes/releases/commercialDetails.jspf  | 24 ++++++--
 .../includes/releases/eccDetails.jspf         | 14 ++++-
 .../includes/releases/summaryRelease.jspf     | 26 +++++++--
 .../includes/vendors/vendorDetail.jspf        | 12 +++-
 .../html/packages/summaryPackage.jspf         | 22 +++++++-
 .../includes/projects/administration.jspf     | 42 +++++++++++---
 .../projects/includes/projects/summary.jspf   | 41 ++++++++++++--
 .../includes/vendors/vendorDetail.jspf        | 12 +++-
 .../resources/js/modules/expandCollapse.js    | 23 ++++++++
 .../resources/content/Language.properties     |  2 +
 .../resources/content/Language_ja.properties  |  2 +
 .../resources/content/Language_vi.properties  |  2 +
 .../resources/content/Language_zh.properties  |  2 +
 15 files changed, 280 insertions(+), 48 deletions(-)
 create mode 100644 frontend/sw360-portlet/src/main/resources/META-INF/resources/js/modules/expandCollapse.js

diff --git a/frontend/sw360-portlet/src/main/resources/META-INF/resources/html/components/includes/components/summary.jspf b/frontend/sw360-portlet/src/main/resources/META-INF/resources/html/components/includes/components/summary.jspf
index d9c56a32c7..46f8834138 100644
--- a/frontend/sw360-portlet/src/main/resources/META-INF/resources/html/components/includes/components/summary.jspf
+++ b/frontend/sw360-portlet/src/main/resources/META-INF/resources/html/components/includes/components/summary.jspf
@@ -17,9 +17,17 @@
 </core_rt:if>
 
 <table class="table label-value-table" id="componentOverview">
-    <thead data-toggle="collapse" data-target="#componentOverviewBody" aria-expanded="true" aria-controls="componentOverviewBody" title="<liferay-ui:message key="click.to.expand.or.collapse"/>">
+    <thead data-toggle="collapse" data-target="#componentOverviewBody" aria-expanded="true" aria-controls="componentOverviewBody">
         <tr>
-            <th colspan="2"><liferay-ui:message key="general" /></th>
+            <th colspan="2">
+                <div class="d-flex justify-content-between">
+                    <liferay-ui:message key="general" />
+                    <div>
+                        <div title="<liferay-ui:message key="click.to.collapse"/>"><clay:icon class="collapse-icon" symbol="caret-top"/></div>
+                        <div title="<liferay-ui:message key="click.to.expand"/>"><clay:icon class="expand-icon" style="display: none;" symbol="caret-bottom"/></div>
+                    </div>
+                </div>
+            </th>
         </tr>
     </thead>
     <tbody id="componentOverviewBody" class="collapse show">
@@ -105,9 +113,17 @@
 </table>
 
 <table class="table label-value-table" id="releaseAggregateTable">
-    <thead data-toggle="collapse" data-target="#releaseAggregateTableBody" aria-expanded="true" aria-controls="releaseAggregateTableBody" title="<liferay-ui:message key="click.to.expand.or.collapse"/>">
+    <thead data-toggle="collapse" data-target="#releaseAggregateTableBody" aria-expanded="true" aria-controls="releaseAggregateTableBody">
         <tr>
-            <th colspan="2"><liferay-ui:message key="release.aggregate.data" /></th>
+            <th colspan="2">
+                <div class="d-flex justify-content-between">
+                    <liferay-ui:message key="release.aggregate.data" />
+                    <div>
+                        <div title="<liferay-ui:message key="click.to.collapse"/>"><clay:icon class="collapse-icon" symbol="caret-top"/></div>
+                        <div title="<liferay-ui:message key="click.to.expand"/>"><clay:icon class="expand-icon" style="display: none;" symbol="caret-bottom"/></div>
+                    </div>
+                </div>
+            </th>
         </tr>
     </thead>
     <tbody id="releaseAggregateTableBody" class="collapse show">
@@ -137,9 +153,17 @@
 </table>
 
 <table class="table label-value-table" id="componentRolesTable">
-    <thead data-toggle="collapse" data-target="#componentRolesTableBody" aria-expanded="true" aria-controls="componentRolesTableBody" title="<liferay-ui:message key="click.to.expand.or.collapse"/>">
+    <thead data-toggle="collapse" data-target="#componentRolesTableBody" aria-expanded="true" aria-controls="componentRolesTableBody">
         <tr>
-            <th colspan="2"><liferay-ui:message key="roles" /></th>
+            <th colspan="2">
+                <div class="d-flex justify-content-between">
+                    <liferay-ui:message key="roles" />
+                    <div>
+                        <div title="<liferay-ui:message key="click.to.collapse"/>"><clay:icon class="collapse-icon" symbol="caret-top"/></div>
+                        <div title="<liferay-ui:message key="click.to.expand"/>"><clay:icon class="expand-icon" style="display: none;" symbol="caret-bottom"/></div>
+                    </div>
+                </div>
+            </th>
         </tr>
     </thead>
     <tbody id="componentRolesTableBody" class="collapse show">
@@ -179,3 +203,15 @@
     </tr>
     </tbody>
 </table>
+
+<%@ include file="/html/utils/includes/requirejs.jspf" %>
+<script>
+
+    require(['jquery', 'modules/expandCollapse'], function($, expandCollapse){
+
+            $("th").click(function () {
+              expandCollapse.toggleIcon($(this));
+            });
+    });
+
+</script>
diff --git a/frontend/sw360-portlet/src/main/resources/META-INF/resources/html/components/includes/releases/clearingDetails.jspf b/frontend/sw360-portlet/src/main/resources/META-INF/resources/html/components/includes/releases/clearingDetails.jspf
index cf7b5018a6..ae6ab1398e 100644
--- a/frontend/sw360-portlet/src/main/resources/META-INF/resources/html/components/includes/releases/clearingDetails.jspf
+++ b/frontend/sw360-portlet/src/main/resources/META-INF/resources/html/components/includes/releases/clearingDetails.jspf
@@ -91,9 +91,17 @@
 <table class="table label-value-table" id="assessmentSummary"
         data-load-assessment-summary-info-url="<%=loadAssessmentSummaryInfoUrl%>"
         data-attachment-content-id="${cliDbid}" data-approved-attachment-content-id="${approvedCliDbid}">
-    <thead data-toggle="collapse" data-target="#assessmentSummaryBody" aria-expanded="true" aria-controls="assessmentSummaryBody" title="<liferay-ui:message key="click.to.expand.or.collapse"/>">
+    <thead data-toggle="collapse" data-target="#assessmentSummaryBody" aria-expanded="true" aria-controls="assessmentSummaryBody">
         <tr>
-            <th colspan="2"><liferay-ui:message key="assessment.summary" /> <liferay-ui:message key="info" />:</th>
+            <th colspan="2">
+                <div class="d-flex justify-content-between">
+                    <liferay-ui:message key="assessment.summary" /> <liferay-ui:message key="info" />:
+                    <div>
+                        <div title="<liferay-ui:message key="click.to.collapse"/>"><clay:icon class="collapse-icon" symbol="caret-top"/></div>
+                        <div title="<liferay-ui:message key="click.to.expand"/>"><clay:icon class="expand-icon" style="display: none;" symbol="caret-bottom"/></div>
+                    </div>
+                </div>
+            </th>
         </tr>
     </thead>
 
@@ -146,9 +154,17 @@
 </table>
 
 <table class="table label-value-table" id="ReleaseClearingOverview">
-    <thead data-toggle="collapse" data-target="#ReleaseClearingOverviewBody" aria-expanded="true" aria-controls="ReleaseClearingOverviewBody" title="<liferay-ui:message key="click.to.expand.or.collapse"/>">
+    <thead data-toggle="collapse" data-target="#ReleaseClearingOverviewBody" aria-expanded="true" aria-controls="ReleaseClearingOverviewBody">
     <tr>
-        <th colspan="2"><liferay-ui:message key="clearing.details" />: <sw360:ReleaseName release="${release}" /></th>
+        <th colspan="2">
+            <div class="d-flex justify-content-between">
+                <liferay-ui:message key="clearing.details" />: <sw360:ReleaseName release="${release}" />
+                <div>
+                    <div title="<liferay-ui:message key="click.to.collapse"/>"><clay:icon class="collapse-icon" symbol="caret-top"/></div>
+                    <div title="<liferay-ui:message key="click.to.expand"/>"><clay:icon class="expand-icon" style="display: none;" symbol="caret-bottom"/></div>
+                </div>
+            </div>
+        </th>
     </tr>
     </thead>
     <tbody id="ReleaseClearingOverviewBody" class="collapse show">
@@ -263,9 +279,17 @@
 </table>
 
 <table class="table label-value-table" id="RequestInfo">
-    <thead data-toggle="collapse" data-target="#RequestInfoBody" aria-expanded="true" aria-controls="RequestInfoBody" title="<liferay-ui:message key="click.to.expand.or.collapse"/>">
+    <thead data-toggle="collapse" data-target="#RequestInfoBody" aria-expanded="true" aria-controls="RequestInfoBody">
     <tr>
-        <th colspan="2"><liferay-ui:message key="request.information" /></th>
+        <th colspan="2">
+            <div class="d-flex justify-content-between">
+                <liferay-ui:message key="request.information" />
+                <div>
+                    <div title="<liferay-ui:message key="click.to.collapse"/>"><clay:icon class="collapse-icon" symbol="caret-top"/></div>
+                    <div title="<liferay-ui:message key="click.to.expand"/>"><clay:icon class="expand-icon" style="display: none;" symbol="caret-bottom"/></div>
+                </div>
+            </div>
+        </th>
     </tr>
     </thead>
     <tbody id="RequestInfoBody" class="collapse show">
@@ -289,9 +313,17 @@
 </table>
 
 <table class="table label-value-table" id="ReleaseSupplementalInfo">
-    <thead data-toggle="collapse" data-target="#ReleaseSupplementalInfoBody" aria-expanded="true" aria-controls="ReleaseSupplementalInfoBody" title="<liferay-ui:message key="click.to.expand.or.collapse"/>">
+    <thead data-toggle="collapse" data-target="#ReleaseSupplementalInfoBody" aria-expanded="true" aria-controls="ReleaseSupplementalInfoBody">
     <tr>
-        <th colspan="2"><liferay-ui:message key="supplemental.information" /></th>
+        <th colspan="2">
+            <div class="d-flex justify-content-between">
+                <liferay-ui:message key="supplemental.information" />
+                <div>
+                    <div title="<liferay-ui:message key="click.to.collapse"/>"><clay:icon class="collapse-icon" symbol="caret-top"/></div>
+                    <div title="<liferay-ui:message key="click.to.expand"/>"><clay:icon class="expand-icon" style="display: none;" symbol="caret-bottom"/></div>
+                </div>
+            </div>
+        </th>
     </tr>
     </thead>
     <tbody id="ReleaseSupplementalInfoBody" class="collapse show">
@@ -310,7 +342,7 @@
 <%--for javascript library loading --%>
 <%@ include file="/html/utils/includes/requirejs.jspf" %>
 <script type="text/javascript">
-    require(['jquery', 'modules/button', 'utils/includes/fossologyClearing', 'modules/dialog'], function ($, button, fossology, dialog) {
+    require(['jquery', 'modules/button', 'utils/includes/fossologyClearing', 'modules/dialog', 'modules/expandCollapse'], function ($, button, fossology, dialog, expandCollapse) {
         var releaseToLicenseDetailsMap = new Map();
         fossology.initialize();
 
@@ -541,6 +573,12 @@
             $parent.append($('<div>', { 'class': styleClass ? styleClass : '' })
                     .append($('<span>', { 'text': message })));
         }
+
+        $(document).ready(function () {
+            $("th").click(function () {
+              expandCollapse.toggleIcon($(this));
+            });
+        });
     });
 
 </script>
diff --git a/frontend/sw360-portlet/src/main/resources/META-INF/resources/html/components/includes/releases/commercialDetails.jspf b/frontend/sw360-portlet/src/main/resources/META-INF/resources/html/components/includes/releases/commercialDetails.jspf
index fcc91304d2..148e35aae8 100644
--- a/frontend/sw360-portlet/src/main/resources/META-INF/resources/html/components/includes/releases/commercialDetails.jspf
+++ b/frontend/sw360-portlet/src/main/resources/META-INF/resources/html/components/includes/releases/commercialDetails.jspf
@@ -9,9 +9,17 @@
 --%>
 <core_rt:set var="cotsDetails" value="${release.cotsDetails}"/>
 <table class="table label-value-table" id="cotsDetailOverview">
-    <thead data-toggle="collapse" data-target="#cotsDetailOverviewBody" aria-expanded="true" aria-controls="cotsDetailOverviewBody" title="<liferay-ui:message key="click.to.expand.or.collapse"/>">
+    <thead data-toggle="collapse" data-target="#cotsDetailOverviewBody" aria-expanded="true" aria-controls="cotsDetailOverviewBody">
     <tr>
-        <th colspan="2"><liferay-ui:message key="commercial.details.administration" /></th>
+        <th colspan="2">
+            <div class="d-flex justify-content-between">
+                <liferay-ui:message key="commercial.details.administration" />
+                <div>
+                    <div title="<liferay-ui:message key="click.to.collapse"/>"><clay:icon class="collapse-icon" symbol="caret-top"/></div>
+                    <div title="<liferay-ui:message key="click.to.expand"/>"><clay:icon class="expand-icon" style="display: none;" symbol="caret-bottom"/></div>
+                </div>
+            </div>
+        </th>
     </tr>
     </thead>
     <tbody  id="cotsDetailOverviewBody" class="collapse show">
@@ -36,9 +44,17 @@
 </table>
 
 <table class="table label-value-table" id="cotsOssInformation">
-    <thead data-toggle="collapse" data-target="#cotsOssInformationBody" aria-expanded="true" aria-controls="cotsOssInformationBody" title="<liferay-ui:message key="click.to.expand.or.collapse"/>">
+    <thead data-toggle="collapse" data-target="#cotsOssInformationBody" aria-expanded="true" aria-controls="cotsOssInformationBody">
     <tr>
-        <th colspan="2"><liferay-ui:message key="cots.oss.information" /></th>
+        <th colspan="2">
+            <div class="d-flex justify-content-between">
+                <liferay-ui:message key="cots.oss.information" />
+                <div>
+                    <div title="<liferay-ui:message key="click.to.collapse"/>"><clay:icon class="collapse-icon" symbol="caret-top"/></div>
+                    <div title="<liferay-ui:message key="click.to.expand"/>"><clay:icon class="expand-icon" style="display: none;" symbol="caret-bottom"/></div>
+                </div>
+            </div>
+        </th>
     </tr>
     </thead>
     <tbody  id="cotsOssInformationBody" class="collapse show">
diff --git a/frontend/sw360-portlet/src/main/resources/META-INF/resources/html/components/includes/releases/eccDetails.jspf b/frontend/sw360-portlet/src/main/resources/META-INF/resources/html/components/includes/releases/eccDetails.jspf
index edf0718cab..ddf62f6e1f 100644
--- a/frontend/sw360-portlet/src/main/resources/META-INF/resources/html/components/includes/releases/eccDetails.jspf
+++ b/frontend/sw360-portlet/src/main/resources/META-INF/resources/html/components/includes/releases/eccDetails.jspf
@@ -11,9 +11,17 @@
 <core_rt:set var="eccInfo" value="${release.eccInformation}"/>
 
 <table class="table label-value-table" id="ECCInfo">
-    <thead data-toggle="collapse" data-target="#ECCInfoBody" aria-expanded="true" aria-controls="ECCInfoBody" title="<liferay-ui:message key="click.to.expand.or.collapse"/>">
-    <tr>
-        <th colspan="2"><liferay-ui:message key="ecc.information" /></th>
+    <thead data-toggle="collapse" data-target="#ECCInfoBody" aria-expanded="true" aria-controls="ECCInfoBody">
+    <tr>
+        <th colspan="2">
+            <div class="d-flex justify-content-between">
+               <liferay-ui:message key="ecc.information" />
+                <div>
+                    <div title="<liferay-ui:message key="click.to.collapse"/>"><clay:icon class="collapse-icon" symbol="caret-top"/></div>
+                    <div title="<liferay-ui:message key="click.to.expand"/>"><clay:icon class="expand-icon" style="display: none;" symbol="caret-bottom"/></div>
+                </div>
+            </div>
+        </th>
     </tr>
     </thead>
     <tbody id="ECCInfoBody" class="collapse show">
diff --git a/frontend/sw360-portlet/src/main/resources/META-INF/resources/html/components/includes/releases/summaryRelease.jspf b/frontend/sw360-portlet/src/main/resources/META-INF/resources/html/components/includes/releases/summaryRelease.jspf
index 1fc92a45d6..d7e877c190 100644
--- a/frontend/sw360-portlet/src/main/resources/META-INF/resources/html/components/includes/releases/summaryRelease.jspf
+++ b/frontend/sw360-portlet/src/main/resources/META-INF/resources/html/components/includes/releases/summaryRelease.jspf
@@ -16,9 +16,17 @@
 
 <core_rt:if test="${release != null}">
     <table class="table label-value-table" id="ReleaseDetailOverview">
-        <thead data-toggle="collapse" data-target="#ReleaseDetailOverviewBody" aria-expanded="true" aria-controls="ReleaseDetailOverviewBody" title="<liferay-ui:message key="click.to.expand.or.collapse"/>">
-        <tr>
-            <th colspan="2"><liferay-ui:message key="general" /></th>
+        <thead data-toggle="collapse" data-target="#ReleaseDetailOverviewBody" aria-expanded="true" aria-controls="ReleaseDetailOverviewBody">
+        <tr>
+            <th colspan="2">
+                <div class="d-flex justify-content-between">
+                    <liferay-ui:message key="general" />
+                    <div>
+                        <div title="<liferay-ui:message key="click.to.collapse"/>"><clay:icon class="collapse-icon" symbol="caret-top"/></div>
+                        <div title="<liferay-ui:message key="click.to.expand"/>"><clay:icon class="expand-icon" style="display: none;" symbol="caret-bottom"/></div>
+                    </div>
+                </div>
+            </th>
         </tr>
         </thead>
         <tbody id="ReleaseDetailOverviewBody" class="collapse show">
@@ -120,9 +128,17 @@
 
     <core_rt:if test="${release.setRepository}">
         <table class="table label-value-table" id="ReleaseRepository">
-            <thead data-toggle="collapse" data-target="#ReleaseRepositoryBody" aria-expanded="true" aria-controls="ReleaseRepositoryBody" title="<liferay-ui:message key="click.to.expand.or.collapse"/>">
+            <thead data-toggle="collapse" data-target="#ReleaseRepositoryBody" aria-expanded="true" aria-controls="ReleaseRepositoryBody">
             <tr>
-                <th colspan="2"><liferay-ui:message key="release.repository" /></th>
+                <th colspan="2">
+                    <div class="d-flex justify-content-between">
+                        <liferay-ui:message key="release.repository" />
+                        <div>
+                            <div title="<liferay-ui:message key="click.to.collapse"/>"><clay:icon class="collapse-icon" symbol="caret-top"/></div>
+                            <div title="<liferay-ui:message key="click.to.expand"/>"><clay:icon class="expand-icon" style="display: none;" symbol="caret-bottom"/></div>
+                        </div>
+                    </div>
+                </th>
             </tr>
             </thead>
             <tbody id="ReleaseRepositoryBody" class="collapse show">
diff --git a/frontend/sw360-portlet/src/main/resources/META-INF/resources/html/components/includes/vendors/vendorDetail.jspf b/frontend/sw360-portlet/src/main/resources/META-INF/resources/html/components/includes/vendors/vendorDetail.jspf
index bcd5758320..89f24c6d5e 100644
--- a/frontend/sw360-portlet/src/main/resources/META-INF/resources/html/components/includes/vendors/vendorDetail.jspf
+++ b/frontend/sw360-portlet/src/main/resources/META-INF/resources/html/components/includes/vendors/vendorDetail.jspf
@@ -9,9 +9,17 @@
 --%>
 
 <table class="table label-value-table" id="ReleaseDetailVendor">
-    <thead data-toggle="collapse" data-target="#ReleaseDetailVendorBody" aria-expanded="true" aria-controls="ReleaseDetailVendorBody" title="<liferay-ui:message key="click.to.expand.or.collapse"/>">
+    <thead data-toggle="collapse" data-target="#ReleaseDetailVendorBody" aria-expanded="true" aria-controls="ReleaseDetailVendorBody">
         <tr>
-            <th colspan="2"><liferay-ui:message key="release.vendor" /></th>
+            <th colspan="2">
+                <div class="d-flex justify-content-between">
+                    <liferay-ui:message key="release.vendor" />
+                    <div>
+                        <div title="<liferay-ui:message key="click.to.collapse"/>"><clay:icon class="collapse-icon" symbol="caret-top"/></div>
+                        <div title="<liferay-ui:message key="click.to.expand"/>"><clay:icon class="expand-icon" style="display: none;" symbol="caret-bottom"/></div>
+                    </div>
+                </div>
+            </th>
         </tr>
     </thead>
     <tbody id="ReleaseDetailVendorBody" class="collapse show" >
diff --git a/frontend/sw360-portlet/src/main/resources/META-INF/resources/html/packages/summaryPackage.jspf b/frontend/sw360-portlet/src/main/resources/META-INF/resources/html/packages/summaryPackage.jspf
index 035f47cf77..fdf7a8e315 100644
--- a/frontend/sw360-portlet/src/main/resources/META-INF/resources/html/packages/summaryPackage.jspf
+++ b/frontend/sw360-portlet/src/main/resources/META-INF/resources/html/packages/summaryPackage.jspf
@@ -11,9 +11,17 @@
 
 <core_rt:if test="${pkg != null}">
     <table class="table label-value-table" id="PackageDetailOverview">
-        <thead data-toggle="collapse" data-target="#PackageDetailOverviewBody" aria-expanded="true" aria-controls="ReleaseDetailOverviewBody" title="<liferay-ui:message key="click.to.expand.or.collapse"/>">
+        <thead data-toggle="collapse" data-target="#PackageDetailOverviewBody" aria-expanded="true" aria-controls="ReleaseDetailOverviewBody">
         <tr>
-            <th colspan="2"><liferay-ui:message key="summary" /></th>
+            <th colspan="2">
+                <div class="d-flex justify-content-between">
+                    <liferay-ui:message key="summary" />
+                    <div>
+                        <div title="<liferay-ui:message key="click.to.collapse"/>"><clay:icon class="collapse-icon" symbol="caret-top"/></div>
+                        <div title="<liferay-ui:message key="click.to.expand"/>"><clay:icon class="expand-icon" style="display: none;" symbol="caret-bottom"/></div>
+                    </div>
+                </div>
+            </th>
         </tr>
         </thead>
         <tbody id="PackageDetailOverviewBody" class="collapse show">
@@ -96,4 +104,14 @@
 
 <%--for javascript library loading --%>
 <%@ include file="/html/utils/includes/requirejs.jspf" %>
+<script>
+
+    require(['jquery', 'modules/expandCollapse'], function($, expandCollapse){
+
+            $("th").click(function () {
+              expandCollapse.toggleIcon($(this));
+            });
+    });
+
+</script>
 </core_rt:if>
diff --git a/frontend/sw360-portlet/src/main/resources/META-INF/resources/html/projects/includes/projects/administration.jspf b/frontend/sw360-portlet/src/main/resources/META-INF/resources/html/projects/includes/projects/administration.jspf
index 7a4e0424c3..71ac4089c3 100644
--- a/frontend/sw360-portlet/src/main/resources/META-INF/resources/html/projects/includes/projects/administration.jspf
+++ b/frontend/sw360-portlet/src/main/resources/META-INF/resources/html/projects/includes/projects/administration.jspf
@@ -9,9 +9,17 @@
 --%>
 
 <table class="table label-value-table" id="clearing">
-    <thead data-toggle="collapse" data-target="#clearingBody" aria-expanded="true" aria-controls="clearingBody" title="<liferay-ui:message key="click.to.expand.or.collapse"/>">
-    <tr>
-        <th colspan="2"><liferay-ui:message key="clearing" /></th>
+    <thead data-toggle="collapse" data-target="#clearingBody" aria-expanded="true" aria-controls="clearingBody">
+    <tr>
+        <th colspan="2">
+            <div class="d-flex justify-content-between">
+                <liferay-ui:message key="clearing" />
+                <div>
+                    <div title="<liferay-ui:message key="click.to.collapse"/>"><clay:icon class="collapse-icon" symbol="caret-top"/></div>
+                    <div title="<liferay-ui:message key="click.to.expand"/>"><clay:icon class="expand-icon" style="display: none;" symbol="caret-bottom"/></div>
+                </div>
+            </div>
+        </th>
     </tr>
     </thead>
     <tbody id="clearingBody" class="collapse show">
@@ -92,9 +100,17 @@
 </table>
 
 <table class="table label-value-table" id="lifecycle">
-    <thead data-toggle="collapse" data-target="#lifecycleBody" aria-expanded="true" aria-controls="lifecycleBody" title="<liferay-ui:message key="click.to.expand.or.collapse"/>">
-    <tr>
-        <th colspan="2"><liferay-ui:message key="lifecycle" /></th>
+    <thead data-toggle="collapse" data-target="#lifecycleBody" aria-expanded="true" aria-controls="lifecycleBody">
+    <tr>
+        <th colspan="2">
+            <div class="d-flex justify-content-between">
+                <liferay-ui:message key="lifecycle" />
+                <div>
+                    <div title="<liferay-ui:message key="click.to.collapse"/>"><clay:icon class="collapse-icon" symbol="caret-top"/></div>
+                    <div title="<liferay-ui:message key="click.to.expand"/>"><clay:icon class="expand-icon" style="display: none;" symbol="caret-bottom"/></div>
+                </div>
+            </div>
+        </th>
     </tr>
     </thead>
     <tbody id="lifecycleBody" class="collapse show">
@@ -122,9 +138,17 @@
 </table>
 
 <table class="table label-value-table" id="LicenseInfoHeader" title="<liferay-ui:message key="license.info.header" />">
-    <thead data-toggle="collapse" data-target="#LicenseInfoHeaderBody" aria-expanded="true" aria-controls="LicenseInfoHeaderBody" title="<liferay-ui:message key="click.to.expand.or.collapse"/>">
-    <tr>
-        <th><liferay-ui:message key="license.info.header" /></th>
+    <thead data-toggle="collapse" data-target="#LicenseInfoHeaderBody" aria-expanded="true" aria-controls="LicenseInfoHeaderBody">
+    <tr>
+        <th colspan="2">
+            <div class="d-flex justify-content-between">
+                <liferay-ui:message key="license.info.header" />
+                <div>
+                    <div title="<liferay-ui:message key="click.to.collapse"/>"><clay:icon class="collapse-icon" symbol="caret-top"/></div>
+                    <div title="<liferay-ui:message key="click.to.expand"/>"><clay:icon class="expand-icon" style="display: none;" symbol="caret-bottom"/></div>
+                </div>
+            </div>
+        </th>
     </tr>
     </thead>
     <tbody id="LicenseInfoHeaderBody" class="collapse show">
diff --git a/frontend/sw360-portlet/src/main/resources/META-INF/resources/html/projects/includes/projects/summary.jspf b/frontend/sw360-portlet/src/main/resources/META-INF/resources/html/projects/includes/projects/summary.jspf
index dc078f78be..52ad763097 100644
--- a/frontend/sw360-portlet/src/main/resources/META-INF/resources/html/projects/includes/projects/summary.jspf
+++ b/frontend/sw360-portlet/src/main/resources/META-INF/resources/html/projects/includes/projects/summary.jspf
@@ -16,9 +16,17 @@
 </core_rt:if>
 
 <table class="table label-value-table" id="general">
-    <thead data-toggle="collapse" data-target="#generalBody" aria-expanded="true" aria-controls="generalBody" title="<liferay-ui:message key="click.to.expand.or.collapse"/>">
-    <tr>
-        <th colspan="2"><liferay-ui:message key="general.information" /></th>
+    <thead data-toggle="collapse" data-target="#generalBody" aria-expanded="true" aria-controls="generalBody">
+    <tr>
+        <th colspan="2">
+            <div class="d-flex justify-content-between">
+                <liferay-ui:message key="general.information" />
+                <div>
+                    <div title="<liferay-ui:message key="click.to.collapse"/>"><clay:icon class="collapse-icon" symbol="caret-top"/></div>
+                    <div title="<liferay-ui:message key="click.to.expand"/>"><clay:icon class="expand-icon" style="display: none;" symbol="caret-bottom"/></div>
+                </div>
+            </div>
+        </th>
     </tr>
     </thead>
     <tbody id="generalBody" class="collapse show">
@@ -86,9 +94,17 @@
 </table>
 
 <table class="table label-value-table" id="roles">
-    <thead data-toggle="collapse" data-target="#rolesBody" aria-expanded="true" aria-controls="rolesBody" title="<liferay-ui:message key="click.to.expand.or.collapse"/>">
-    <tr>
-        <th colspan="2"><liferay-ui:message key="roles" /></th>
+    <thead data-toggle="collapse" data-target="#rolesBody" aria-expanded="true" aria-controls="rolesBody">
+    <tr>
+        <th colspan="2">
+            <div class="d-flex justify-content-between">
+                <liferay-ui:message key="roles" />
+                <div>
+                    <div title="<liferay-ui:message key="click.to.collapse"/>"><clay:icon class="collapse-icon" symbol="caret-top"/></div>
+                    <div title="<liferay-ui:message key="click.to.expand"/>"><clay:icon class="expand-icon" style="display: none;" symbol="caret-bottom"/></div>
+                </div>
+            </div>
+        </th>
     </tr>
     </thead>
     <tbody id="rolesBody" class="collapse show">
@@ -138,3 +154,16 @@
     </tr>
     </tbody>
 </table>
+
+<%@ include file="/html/utils/includes/requirejs.jspf" %>
+<script>
+
+    require(['jquery', 'modules/expandCollapse'], function($, expandCollapse){
+        $(document).ready(function () {
+            $("th").click(function () {
+              expandCollapse.toggleIcon($(this));
+            });
+        });
+    });
+
+</script>
diff --git a/frontend/sw360-portlet/src/main/resources/META-INF/resources/html/projects/includes/vendors/vendorDetail.jspf b/frontend/sw360-portlet/src/main/resources/META-INF/resources/html/projects/includes/vendors/vendorDetail.jspf
index 0b4e2af678..04c2af3397 100644
--- a/frontend/sw360-portlet/src/main/resources/META-INF/resources/html/projects/includes/vendors/vendorDetail.jspf
+++ b/frontend/sw360-portlet/src/main/resources/META-INF/resources/html/projects/includes/vendors/vendorDetail.jspf
@@ -9,9 +9,17 @@
 --%>
 
 <table class="table label-value-table" id="projectDetailVendor">
-    <thead data-toggle="collapse" data-target="#vendorBody" aria-expanded="true" aria-controls="vendorBody" title="<liferay-ui:message key="click.to.expand.or.collapse"/>">
+    <thead data-toggle="collapse" data-target="#vendorBody" aria-expanded="true" aria-controls="vendorBody">
         <tr>
-            <th colspan="2"><liferay-ui:message key="project.vendor" /></th>
+            <th colspan="2">
+                <div class="d-flex justify-content-between">
+                    <liferay-ui:message key="project.vendor" />
+                    <div>
+                        <div title="<liferay-ui:message key="click.to.collapse"/>"><clay:icon class="collapse-icon" symbol="caret-top"/></div>
+                        <div title="<liferay-ui:message key="click.to.expand"/>"><clay:icon class="expand-icon" style="display: none;" symbol="caret-bottom"/></div>
+                    </div>
+                </div>
+            </th>
         </tr>
     </thead>
     <tbody id="vendorBody" class="collapse show">
diff --git a/frontend/sw360-portlet/src/main/resources/META-INF/resources/js/modules/expandCollapse.js b/frontend/sw360-portlet/src/main/resources/META-INF/resources/js/modules/expandCollapse.js
new file mode 100644
index 0000000000..cacf19609e
--- /dev/null
+++ b/frontend/sw360-portlet/src/main/resources/META-INF/resources/js/modules/expandCollapse.js
@@ -0,0 +1,23 @@
+/*
+  ~ Copyright Siemens Healthineers GmBH, 2023. Part of the SW360 Portal Project.
+  ~
+  ~ This program and the accompanying materials are made
+  ~ available under the terms of the Eclipse Public License 2.0
+  ~ which is available at https://www.eclipse.org/legal/epl-2.0/
+  ~
+  ~ SPDX-License-Identifier: EPL-2.0
+ */
+define('modules/expandCollapse', [ 'jquery' ], function($) {
+    return {
+        toggleIcon: function toggleIcon(element){
+
+            if (element.closest('thead').hasClass('collapsed')) {
+                element.find("div").eq(3).children().css('display', 'none');
+                element.find("div").eq(2).children().css('display', 'inline');
+            }else{
+                element.find("div").eq(3).children().css('display', 'inline');
+                element.find("div").eq(2).children().css('display', 'none');
+            }
+        }
+    }
+});
diff --git a/frontend/sw360-portlet/src/main/resources/content/Language.properties b/frontend/sw360-portlet/src/main/resources/content/Language.properties
index 4a32980ffe..98efbcceba 100644
--- a/frontend/sw360-portlet/src/main/resources/content/Language.properties
+++ b/frontend/sw360-portlet/src/main/resources/content/Language.properties
@@ -241,6 +241,8 @@ click.to.edit=Click to edit
 click.to.link.a.release=Click to link a Release
 click.to.set.department=Click to set Department
 click.to.expand.or.collapse=Click to expand or collapse
+click.to.expand=Click to Expand
+click.to.collapse=Click to Collapse
 click.to.set.licenses=Click to set Licenses
 click.to.set.vendor=Click to set vendor
 client.id=Client Id
diff --git a/frontend/sw360-portlet/src/main/resources/content/Language_ja.properties b/frontend/sw360-portlet/src/main/resources/content/Language_ja.properties
index fa6c40051f..50dab87cd7 100644
--- a/frontend/sw360-portlet/src/main/resources/content/Language_ja.properties
+++ b/frontend/sw360-portlet/src/main/resources/content/Language_ja.properties
@@ -241,6 +241,8 @@ click.to.edit=クリックして編集
 click.to.link.a.release=Click to link a Release
 click.to.set.department=クリックして部門を設定
 click.to.expand.or.collapse=Click to expand or collapse
+click.to.expand=Click to Expand
+click.to.collapse=Click to Collapse
 click.to.set.licenses=クリックしてライセンスを設定
 click.to.set.vendor=クリックしてベンダーを設定
 client.id=クライアントID
diff --git a/frontend/sw360-portlet/src/main/resources/content/Language_vi.properties b/frontend/sw360-portlet/src/main/resources/content/Language_vi.properties
index a5d5bfa35e..a32f8ac13c 100644
--- a/frontend/sw360-portlet/src/main/resources/content/Language_vi.properties
+++ b/frontend/sw360-portlet/src/main/resources/content/Language_vi.properties
@@ -241,6 +241,8 @@ click.to.edit=Bấm vào để chỉnh sửa
 click.to.link.a.release=Click to link a Release
 click.to.set.department=Nhấn vào đây để đặt bộ phận
 click.to.expand.or.collapse=Click to expand or collapse
+click.to.expand=Click to Expand
+click.to.collapse=Click to Collapse
 click.to.set.licenses=Nhấn vào đây để đặt Giấy phép
 click.to.set.vendor=Nhấn vào đây để đặt nhà cung cấp
 client.id=Client Id
diff --git a/frontend/sw360-portlet/src/main/resources/content/Language_zh.properties b/frontend/sw360-portlet/src/main/resources/content/Language_zh.properties
index d9061ac13f..012c5706fd 100644
--- a/frontend/sw360-portlet/src/main/resources/content/Language_zh.properties
+++ b/frontend/sw360-portlet/src/main/resources/content/Language_zh.properties
@@ -239,6 +239,8 @@ click.to.add.row.to.external.urls=点击添加行到外部URL
 click.to.add.secondary.department.and.roles=点击添加第二部门和角色
 click.to.edit=点击编辑
 click.to.expand.or.collapse=Click to expand or collapse
+click.to.expand=Click to Expand
+click.to.collapse=Click to Collapse
 click.to.link.a.release=Click to link a Release
 click.to.set.licenses=点击设置许可证
 click.to.set.vendor=点击设置供应商