diff --git a/sass/stylesheets/sass/screen.scss b/sass/stylesheets/sass/screen.scss
index 0d92abb2ed0..9a2268080bf 100644
--- a/sass/stylesheets/sass/screen.scss
+++ b/sass/stylesheets/sass/screen.scss
@@ -789,6 +789,9 @@ form {
 				border-bottom-color: darken($ui-bg-color, 5%) !important;
 			}
 		}
+		&.hidden {
+			display: none;
+		}
 	}
 
 	tbody th,
diff --git a/ui/widgets/problems/assets/js/class.widget.js b/ui/widgets/problems/assets/js/class.widget.js
index 0770baaa516..4bf59b3078e 100644
--- a/ui/widgets/problems/assets/js/class.widget.js
+++ b/ui/widgets/problems/assets/js/class.widget.js
@@ -75,34 +75,22 @@ class CWidgetProblems extends CWidget {
 				button.disabled = true;
 
 				const rows = this._target.querySelectorAll("tr[data-cause-eventid='" + button.dataset.eventid + "']");
-				let state = false;
 
-				// Show symptom rows for current cause. Sliding animations are not supported on table rows.
-				rows.forEach((row) => {
-					if (row.getAttribute('style').indexOf('display:') != -1) {
-						row.style.display = null;
-						state = true;
-					}
-					else {
-						row.style.display = 'none';
-						state = false;
-					}
-				});
-
-				// Store or remove opened cause event IDs localy.
-				if (state) {
-					button.classList.remove(this.ZBX_STYLE_BTN_WIDGET_EXPAND);
-					button.classList.add(this.ZBX_STYLE_BTN_WIDGET_COLLAPSE);
+				if (rows[0].classList.contains('hidden')) {
+					button.classList.replace(this.ZBX_STYLE_BTN_WIDGET_EXPAND, this.ZBX_STYLE_BTN_WIDGET_COLLAPSE);
 					button.title = t('Collapse');
 
 					this._opened_eventids.push(button.dataset.eventid);
+
+					[...rows].forEach(row => row.classList.remove('hidden'));
 				}
 				else {
-					button.classList.remove(this.ZBX_STYLE_BTN_WIDGET_COLLAPSE);
-					button.classList.add(this.ZBX_STYLE_BTN_WIDGET_EXPAND);
+					button.classList.replace(this.ZBX_STYLE_BTN_WIDGET_COLLAPSE, this.ZBX_STYLE_BTN_WIDGET_EXPAND);
 					button.title = t('Expand');
 
 					this._opened_eventids = this._opened_eventids.filter((id) => id !== button.dataset.eventid);
+
+					[...rows].forEach(row => row.classList.add('hidden'));
 				}
 
 				// When complete enable button again.
diff --git a/ui/widgets/problems/views/widget.view.php b/ui/widgets/problems/views/widget.view.php
index d7ac1ca5dcb..3ec29ce12f4 100644
--- a/ui/widgets/problems/views/widget.view.php
+++ b/ui/widgets/problems/views/widget.view.php
@@ -403,8 +403,8 @@ function addProblemsToTable(CTableInfo $table, array $problems, array $data, $ne
 				// First and second column empty for symptom event.
 				$row = (new CRow($empty_col))
 					->addClass(ZBX_STYLE_PROBLEM_NESTED_SMALL)
-					->setAttribute('data-cause-eventid', $problem['cause_eventid'])
-					->addStyle('display: none');
+					->addClass('hidden')
+					->setAttribute('data-cause-eventid', $problem['cause_eventid']);
 
 				if (getUserTheme(CWebUser::$data) === 'dark-theme'
 						|| getUserTheme(CWebUser::$data) === 'blue-theme') {