diff --git a/HISTORY.md b/HISTORY.md
index 9868351..61911ac 100644
--- a/HISTORY.md
+++ b/HISTORY.md
@@ -3,6 +3,12 @@
 https://github.com/josdejong/jsoneditor
 
 
+## not yet published version 8.4.0
+
+- Added CSS classes `jsoneditor-expanded` and `jsoneditor-collapsed` on array 
+  and object nodes reflecting there state.
+
+
 ## 2020-01-18 version 8.3.0
 
 - Update dependency `ajv` to `v6.11.0`. 
diff --git a/src/js/Node.js b/src/js/Node.js
index 49f2498..ab49457 100644
--- a/src/js/Node.js
+++ b/src/js/Node.js
@@ -781,6 +781,9 @@ export class Node {
         child.expand(recurse)
       })
     }
+
+    // update the css classes of table row, and fire onClassName etc
+    this.updateDom({ recurse: false })
   }
 
   /**
@@ -807,6 +810,9 @@ export class Node {
       this.dom.expand.className = 'jsoneditor-button jsoneditor-collapsed'
     }
     this.expanded = false
+
+    // update the css classes of table row, and fire onClassName etc
+    this.updateDom({ recurse: false })
   }
 
   /**
@@ -2221,15 +2227,32 @@ export class Node {
     // apply value to DOM
     const domValue = this.dom.value
     if (domValue) {
-      if (this.type === 'array') {
+      if (this.type === 'array' || this.type === 'object') {
         this.updateNodeName()
-        addClassName(this.dom.tr, 'jsoneditor-expandable')
-      } else if (this.type === 'object') {
-        this.updateNodeName()
-        addClassName(this.dom.tr, 'jsoneditor-expandable')
       } else {
         domValue.innerHTML = this._escapeHTML(this.value)
-        removeClassName(this.dom.tr, 'jsoneditor-expandable')
+      }
+    }
+
+    // apply styling to the table row
+    const tr = this.dom.tr
+    if (tr) {
+      if (this.type === 'array' || this.type === 'object') {
+        console.log(this.getPath(), this.type, this.expanded, tr)
+
+        addClassName(tr, 'jsoneditor-expandable')
+
+        if (this.expanded) {
+          addClassName(tr, 'jsoneditor-expanded')
+          removeClassName(tr, 'jsoneditor-collapsed')
+        } else {
+          addClassName(tr, 'jsoneditor-collapsed')
+          removeClassName(tr, 'jsoneditor-expanded')
+        }
+      } else {
+        removeClassName(tr, 'jsoneditor-expandable')
+        removeClassName(tr, 'jsoneditor-expanded')
+        removeClassName(tr, 'jsoneditor-collapsed')
       }
     }
 
@@ -2237,8 +2260,6 @@ export class Node {
     this._updateDomField()
     this._updateDomValue()
 
-    this._updateCssClassName()
-
     // update childs indexes
     if (options && options.updateIndexes === true) {
       // updateIndexes is true or undefined
@@ -2268,6 +2289,9 @@ export class Node {
     if (this.showMore) {
       this.showMore.updateDom()
     }
+
+    // fire onClassName
+    this._updateCssClassName()
   }
 
   /**