diff --git a/package-lock.json b/package-lock.json
index 9589552f..25f6a561 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
     "name": "react-json-view",
-    "version": "1.21.1",
+    "version": "1.21.3",
     "lockfileVersion": 1,
     "requires": true,
     "dependencies": {
@@ -5263,6 +5263,15 @@
                 "sha.js": "^2.4.8"
             }
         },
+        "cross-env": {
+            "version": "7.0.3",
+            "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz",
+            "integrity": "sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==",
+            "dev": true,
+            "requires": {
+                "cross-spawn": "^7.0.1"
+            }
+        },
         "cross-fetch": {
             "version": "3.0.6",
             "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.0.6.tgz",
diff --git a/package.json b/package.json
index 36d66aad..b0d11c24 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
         "babel-plugin-react-html-attrs": "^2.1.0",
         "chai": "^4.2.0",
         "coveralls": "^3.1.0",
+        "cross-env": "^7.0.3",
         "css-loader": "^4.3.0",
         "enzyme": "^3.2.0",
         "enzyme-adapter-react-16": "^1.15.5",
@@ -52,19 +53,19 @@
         "react-dom": "^17.0.0 || ^16.3.0 || ^15.5.4"
     },
     "scripts": {
-        "build": "NODE_ENV=production webpack --config webpack/webpack.config.js -p --display-error-details --progress --optimize-minimize",
-        "prebuild": "NODE_ENV=test npm run test:unit",
-        "build:demo": "NODE_ENV=production webpack --config webpack/webpack.config-demo.js -p --display-error-details --progress --optimize-minimize",
-        "dev": "NODE_ENV=development webpack-dev-server --config webpack/webpack.config-dev.js --open",
+        "build": "cross-env NODE_ENV=production webpack --config webpack/webpack.config.js -p --display-error-details --progress --optimize-minimize",
+        "prebuild": "cross-env NODE_ENV=test npm run test:unit",
+        "build:demo": "cross-env NODE_ENV=production webpack --config webpack/webpack.config-demo.js -p --display-error-details --progress --optimize-minimize",
+        "dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack/webpack.config-dev.js --open",
         "modules:debug": "./docker/debug.sh",
         "modules:tree": "webpack --config webpack/webpack.config.js --json ",
         "modules:size-analyzer": "webpack --config webpack/webpack.config.js --json | webpack-bundle-size-analyzer",
         "test": "npm run test:coverage",
-        "test:unit": "NODE_ENV=test nyc mocha test/**/*-test.js",
-        "test:coverage": "NODE_ENV=test nyc --reporter=text-lcov mocha test/**/*-test.js | coveralls",
-        "test:watch": "NODE_ENV=test nyc mocha -w test/**/*-test.js",
-        "lint": "NODE_ENV=test ./node_modules/.bin/eslint src",
-        "lint-fixup": "NODE_ENV=test ./node_modules/.bin/eslint src --ext .js,.jsx --fix"
+        "test:unit": "cross-env NODE_ENV=test nyc mocha test/**/*-test.js",
+        "test:coverage": "cross-env NODE_ENV=test nyc --reporter=text-lcov mocha test/**/*-test.js | coveralls",
+        "test:watch": "cross-env NODE_ENV=test nyc mocha -w test/**/*-test.js",
+        "lint": "cross-env NODE_ENV=test ./node_modules/.bin/eslint src",
+        "lint-fixup": "cross-env NODE_ENV=test ./node_modules/.bin/eslint src --ext .js,.jsx --fix"
     },
     "repository": {
         "type": "git",
diff --git a/src/js/components/ArrayGroup.js b/src/js/components/ArrayGroup.js
index deae3f8e..cac3dd75 100644
--- a/src/js/components/ArrayGroup.js
+++ b/src/js/components/ArrayGroup.js
@@ -1,10 +1,14 @@
 import React from 'react';
 import Theme from './../themes/getStyle';
+import { toType } from './../helpers/util';
 
 import VariableMeta from './VariableMeta';
 import ObjectName from './ObjectName';
 import ObjectComponent from './DataTypes/Object';
 
+//attribute store
+import AttributeStore from './../stores/ObjectAttributes';
+
 //icons
 import { CollapsedIcon, ExpandedIcon } from './ToggleIcons';
 
@@ -14,15 +18,33 @@ const SINGLE_INDENT = 5;
 export default class extends React.PureComponent {
     constructor(props) {
         super(props);
+        const expanded =
+            (props.collapsed === false ||
+                (props.collapsed !== true && props.collapsed > props.depth)) &&
+            (!props.shouldCollapse ||
+                props.shouldCollapse({
+                    name: props.name,
+                    src: props.src,
+                    type: toType(props.src),
+                    namespace: props.namespace
+                }) === false);
+        const expandedAttribute = AttributeStore.get(
+            props.rjvId,
+            props.namespace,
+            'expanded',
+            expanded
+        );
+
         this.state = {
             expanded: []
         };
+        this.state.expanded[-1] = expandedAttribute;
     }
 
     toggleCollapsed = i => {
         const newExpanded = [];
         for (const j in this.state.expanded) {
-            newExpanded.push(this.state.expanded[j]);
+            newExpanded[j] = this.state.expanded[j];
         }
         newExpanded[i] = !newExpanded[i];
         this.setState({
@@ -50,6 +72,8 @@ export default class extends React.PureComponent {
             jsvRoot,
             namespace,
             parent_type,
+            collapsed,
+            shouldCollapse,
             ...rest
         } = this.props;
 
@@ -67,82 +91,103 @@ export default class extends React.PureComponent {
         return (
             <div
                 class="object-key-val"
+                onMouseEnter={() =>
+                    this.setState({ ...this.state, hovered: true })
+                }
+                onMouseLeave={() =>
+                    this.setState({ ...this.state, hovered: false })
+                }
                 {...Theme(theme, jsvRoot ? 'jsv-root' : 'objectKeyVal', {
                     paddingLeft: object_padding_left
                 })}
             >
-                <ObjectName {...this.props} />
-
-                <span>
-                    <VariableMeta size={src.length} {...this.props} />
-                </span>
-                {[...Array(groups)].map((_, i) => (
+                <span {...Theme(theme, 'brace-row')}>
                     <div
-                        key={i}
-                        class="object-key-val array-group"
-                        {...Theme(theme, 'objectKeyVal', {
-                            marginLeft: 6,
-                            paddingLeft: array_group_padding_left
-                        })}
+                        class="icon-container"
+                        {...Theme(theme, 'icon-container')}
+                        onClick={e => {
+                            this.toggleCollapsed(-1);
+                        }}
                     >
-                        <span {...Theme(theme, 'brace-row')}>
+                        {this.getExpandedIcon(-1)}
+                    </div>
+
+                    <ObjectName {...this.props} />
+
+                    <span>
+                        <VariableMeta size={src.length} rowHovered={this.state.hovered} {...this.props} />
+                    </span>
+                    {(this.state.expanded[-1]
+                        ? [...Array(groups)].map((_, i) => (
                             <div
-                                class="icon-container"
-                                {...Theme(theme, 'icon-container')}
-                                onClick={e => {
-                                    this.toggleCollapsed(i);
-                                }}
+                                key={i}
+                                class="object-key-val array-group"
+                                {...Theme(theme, 'objectKeyVal', {
+                                    marginLeft: 6,
+                                    paddingLeft: array_group_padding_left
+                                })}
                             >
-                                {this.getExpandedIcon(i)}
-                            </div>
-                            {this.state.expanded[i] ? (
-                                <ObjectComponent
-                                    key={name + i}
-                                    depth={0}
-                                    name={false}
-                                    collapsed={false}
-                                    groupArraysAfterLength={size}
-                                    index_offset={i * size}
-                                    src={src.slice(i * size, i * size + size)}
-                                    namespace={namespace}
-                                    type="array"
-                                    parent_type="array_group"
-                                    theme={theme}
-                                    {...rest}
-                                />
-                            ) : (
-                                <span
-                                    {...Theme(theme, 'brace')}
-                                    onClick={e => {
-                                        this.toggleCollapsed(i);
-                                    }}
-                                    class="array-group-brace"
-                                >
-                                    [
+                                <span {...Theme(theme, 'brace-row')}>
                                     <div
-                                        {...Theme(
-                                            theme,
-                                            'array-group-meta-data'
-                                        )}
-                                        class="array-group-meta-data"
+                                        class="icon-container"
+                                        {...Theme(theme, 'icon-container')}
+                                        onClick={e => {
+                                            this.toggleCollapsed(i);
+                                        }}
                                     >
+                                        {this.getExpandedIcon(i)}
+                                    </div>
+                                    {this.state.expanded[i] ? (
+                                        <ObjectComponent
+                                            key={name + i}
+                                            depth={0}
+                                            name={false}
+                                            collapsed={false}
+                                            groupArraysAfterLength={size}
+                                            index_offset={i * size}
+                                            src={src.slice(i * size, i * size + size)}
+                                            namespace={namespace}
+                                            type="array"
+                                            parent_type="array_group"
+                                            theme={theme}
+                                            {...rest}
+                                        />
+                                    ) : (
                                         <span
-                                            class="object-size"
-                                            {...Theme(theme, 'object-size')}
+                                            {...Theme(theme, 'brace')}
+                                            onClick={e => {
+                                                this.toggleCollapsed(i);
+                                            }}
+                                            class="array-group-brace"
                                         >
-                                            {i * size}
-                                            {' - '}
-                                            {i * size + size > src.length
-                                                ? src.length
-                                                : i * size + size}
+                                            [
+                                            <div
+                                                {...Theme(
+                                                    theme,
+                                                    'array-group-meta-data'
+                                                )}
+                                                class="array-group-meta-data"
+                                            >
+                                                <span
+                                                    class="object-size"
+                                                    {...Theme(theme, 'object-size')}
+                                                >
+                                                    {i * size}
+                                                    {' - '}
+                                                    {i * size + size > src.length
+                                                        ? src.length
+                                                        : i * size + size}
+                                                </span>
+                                            </div>
+                                            ]
                                         </span>
-                                    </div>
-                                    ]
+                                    )}
                                 </span>
-                            )}
-                        </span>
-                    </div>
-                ))}
+                            </div>
+                        ))
+                        : null
+                    )}
+                </span>
             </div>
         );
     }
diff --git a/test/tests/js/components/ArrayGroup-test.js b/test/tests/js/components/ArrayGroup-test.js
index 7295be47..c4369906 100644
--- a/test/tests/js/components/ArrayGroup-test.js
+++ b/test/tests/js/components/ArrayGroup-test.js
@@ -19,6 +19,7 @@ describe('<ArrayGroup />', function () {
                 theme="rjv-default"
                 jsvRoot={false}
                 indentWidth={4}
+                collapsed={false}
             />
         );
 
@@ -35,8 +36,15 @@ describe('<ArrayGroup />', function () {
                 theme="rjv-default"
                 jsvRoot={false}
                 indentWidth={4}
+                shouldCollapse={() => false}
+                collapsed={0}
+                depth={10}
             />
         );
+        
+        wrapper.find('.icon-container').first().simulate('click');
+
+        expect(wrapper.state().expanded[-1]).to.equal(true);
 
         wrapper.find('.array-group-brace').first().simulate('click');
 
@@ -49,6 +57,11 @@ describe('<ArrayGroup />', function () {
             .simulate('click');
 
         expect(wrapper.state().expanded[0]).to.equal(false);
+        
+        wrapper.find('.icon-container').first().simulate('click');
+
+        expect(wrapper.state().expanded[-1]).to.equal(false);
+
     });
 
     it('ArrayGroup displays arrays on expansion', function () {
@@ -61,10 +74,12 @@ describe('<ArrayGroup />', function () {
                 theme="rjv-default"
                 jsvRoot={false}
                 indentWidth={4}
+                collapsed={true}
+                shouldCollapse={()=>false}
             />
         );
 
-        wrapper.setState({ expanded: { 0: true } });
+        wrapper.setState({ expanded: { [-1]: true, 0: true } });
 
         expect(wrapper.find(JsonObject).length).to.equal(1);
 
@@ -83,12 +98,15 @@ describe('<ArrayGroup />', function () {
                 theme="rjv-default"
                 jsvRoot={false}
                 indentWidth={4}
+                collapsed={10}
+                depth={0}
+                shouldCollapse={()=>false}
             />
         );
 
         expect(wrapper.find('.array-group').length).to.equal(4);
 
-        wrapper.setState({ expanded: { 3: true } });
+        wrapper.setState({ expanded: { [-1]: true, 3: true } });
 
         expect(
             wrapper.find('.array-group').last().find(JsonString).length
@@ -105,6 +123,7 @@ describe('<ArrayGroup />', function () {
                 theme="rjv-default"
                 jsvRoot={true}
                 indentWidth={4}
+                collapsed={false}
             />
         );