diff --git a/src/App.js b/src/App.js
index 6b7e0d8..c689580 100644
--- a/src/App.js
+++ b/src/App.js
@@ -21,6 +21,7 @@ class App extends Component {
         this.state.gridData = this.state.treeViewData;
         this.menuStateChange = this.menuStateChange.bind(this);
         this.onStatusChecked = this.onStatusChecked.bind(this);
+        this.state.toggleState = this.state.testResults?.reporterOptions?.expandResults;
     }
     getStatusList() {
         return statusList;
@@ -230,6 +231,10 @@ class App extends Component {
         });
     };
 
+    onExpandToggle = toggleState => {
+        this.setState({ toggleState: toggleState });
+    };
+
     render() {
         return (
             <div className="App">
@@ -248,12 +253,11 @@ class App extends Component {
                 />
                 <Main
                     testResults={this.state.gridData}
-                    expandResults={
-                        this.state.testResults?.reporterOptions?.expandResults
-                    }
+                    expandResults={this.state.toggleState}
                     information={this.state.information}
                     statusList={this.getStatusList()}
                     onStatusChecked={this.onStatusChecked}
+                    onExpandToggle={this.onExpandToggle}
                 />
             </div>
         );
diff --git a/src/App.test.js b/src/App.test.js
index 5af7ac5..b417ed4 100644
--- a/src/App.test.js
+++ b/src/App.test.js
@@ -1,4 +1,3 @@
-import '@testing-library/jest-dom';
 import React from 'react';
 import App from './App';
 import { render, fireEvent } from '@testing-library/react';
@@ -69,8 +68,11 @@ describe('Tree click', () => {
             container.querySelector('.sidenav').classList.contains('open'),
         ).toEqual(true);
         const elem = container.querySelectorAll('.nodeTitle');
+        expect(container.querySelectorAll('.tabs')).toHaveLength(12);
+        expect(container.querySelectorAll('.tab-content')).toHaveLength(12);
         fireEvent.click(elem[1]);
-        expect(container.querySelector('.main')).toMatchSnapshot();
+        expect(container.querySelectorAll('.tabs')).toHaveLength(11);
+        expect(container.querySelectorAll('.tab-content')).toHaveLength(11);
     });
 });
 
@@ -90,3 +92,16 @@ describe('Status filter', () => {
         expect(container.querySelectorAll('.tab-content').length).toEqual(40);
     });
 });
+describe('Toggle Button', () => {
+    test('Should fire event', () => {
+        window.resultData = data;
+        const { container } = render(<App></App>);
+        expect(
+            container.querySelectorAll('.togglerCheckBox:checked'),
+        ).toHaveLength(0);
+        fireEvent.click(container.querySelector('#toggleButton'));
+        expect(
+            container.querySelectorAll('.togglerCheckBox:checked'),
+        ).toHaveLength(12);
+    });
+});
diff --git a/src/Components/FilterToggler/FilterToggler.css b/src/Components/FilterToggler/FilterToggler.css
new file mode 100644
index 0000000..2584fd1
--- /dev/null
+++ b/src/Components/FilterToggler/FilterToggler.css
@@ -0,0 +1,3 @@
+.filterWrapper {
+    display: inline-block;
+}
diff --git a/src/Components/FilterToggler/FilterToggler.js b/src/Components/FilterToggler/FilterToggler.js
index b100787..72881bb 100644
--- a/src/Components/FilterToggler/FilterToggler.js
+++ b/src/Components/FilterToggler/FilterToggler.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import CheckBox from './CheckBox';
 import PropTypes from 'prop-types';
+import './FilterToggler.css';
 export default class FilterToggler extends React.Component {
     constructor(props) {
         super(props);
@@ -35,7 +36,7 @@ export default class FilterToggler extends React.Component {
     render() {
         if (this.props.statusList && this.props.statusList.length > 0) {
             return (
-                <div>
+                <div className="filterWrapper">
                     <p>
                         Filter:{' '}
                         {this.state.statusList.map(status => {
diff --git a/src/Components/Grid/TabContent.js b/src/Components/Grid/TabContent.js
index 5d32636..3cbfbed 100644
--- a/src/Components/Grid/TabContent.js
+++ b/src/Components/Grid/TabContent.js
@@ -19,6 +19,7 @@ class TabContent extends Component {
                     expandResults={this.props.expandResults}
                     item={this.props.item}
                     onShowModel={this.props.onShowModel}
+                    key={`${this.props.item.id}${this.props.expandResults}`}
                 />
             );
         } else {
diff --git a/src/Components/Main/Main.js b/src/Components/Main/Main.js
index 00f2076..cfee203 100644
--- a/src/Components/Main/Main.js
+++ b/src/Components/Main/Main.js
@@ -7,6 +7,7 @@ import Modal from './../Modal/Modal';
 import PropTypes from 'prop-types';
 import Information from '../Information/Information';
 import FilterToggler from '../FilterToggler/FilterToggler';
+import { ToggleButton } from '../ToggleButton/ToggleButton';
 
 class Main extends Component {
     constructor(props) {
@@ -59,15 +60,23 @@ class Main extends Component {
         this.setState({ showModel: true });
         this.setState({ modelData: item });
     }
+
     render() {
         return (
             <div className="main">
                 <Summary resultSummary={this.state.resultSummary} />
                 <Information info={this.props.information}></Information>
-                <FilterToggler
-                    statusList={this.props.statusList}
-                    onStatusChecked={this.props.onStatusChecked}
-                />
+                <div className="togglesWrapper">
+                    <FilterToggler
+                        statusList={this.props.statusList}
+                        onStatusChecked={this.props.onStatusChecked}
+                    />
+                    <ToggleButton
+                        checkedText="Expand All"
+                        onToggle={this.props.onExpandToggle}
+                        toggleState={this.props.expandResults}
+                    />
+                </div>
                 <GridHeader />
                 <GridTabView
                     expandResults={this.props.expandResults}
@@ -89,5 +98,6 @@ Main.propTypes = {
     information: PropTypes.array,
     statusList: PropTypes.array,
     onStatusChecked: PropTypes.func.isRequired,
+    onExpandToggle: PropTypes.func.isRequired,
 };
 export default Main;
diff --git a/src/Components/ToggleButton/ToggleButton.css b/src/Components/ToggleButton/ToggleButton.css
new file mode 100644
index 0000000..af3a432
--- /dev/null
+++ b/src/Components/ToggleButton/ToggleButton.css
@@ -0,0 +1,107 @@
+.checkbox-switch input[type='checkbox'] {
+    width: 0;
+    height: 0;
+    position: absolute;
+    top: -9999px;
+    right: -9999px;
+    overflow: hidden;
+    display: none;
+}
+
+.checkbox-switch > *,
+.checkbox-switch > *:after,
+.checkbox-switch > *:before {
+    box-sizing: border-box;
+}
+
+.checkbox-switch {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    margin-bottom: 2.2652rem;
+}
+.checkbox-switch:after {
+    content: '';
+    display: table;
+    clear: both;
+}
+.checkbox-switch .checkbox-right {
+    float: right;
+    padding-top: 12px;
+}
+.checkbox-switch legend {
+    margin: 0;
+    padding: 0;
+    display: block;
+    font-weight: 600;
+    font-size: 1.2rem;
+    line-height: 1.3rem;
+    margin-bottom: 1.618rem;
+}
+.checkbox-switch legend.legend-left {
+    margin: 0 1.618rem 0 0;
+    float: left;
+}
+.checkbox-switch input[type='checkbox'] + label {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    line-height: 1.3rem;
+}
+@media screen and (max-width: 614px) {
+    .checkbox-switch input[type='checkbox'] + label {
+        padding-bottom: 5px;
+    }
+}
+.checkbox-switch input[type='checkbox'] + label:before {
+    width: 2.3rem;
+    height: 1.3rem;
+    content: '•';
+    -webkit-transition: all 0.2s ease;
+    transition: all 0.2s ease;
+    text-align: left;
+    font-size: 2.5rem;
+    line-height: 0.9rem;
+    float: left;
+    overflow: hidden;
+    color: black;
+    border: 0.1949902505rem solid black;
+    border-radius: 0.65rem;
+    margin: auto 0;
+    border-color: gray;
+    background: gray;
+    color: white;
+}
+
+@media screen and (min-width: 25rem) {
+    .checkbox-switch input[type='checkbox'] + label:before {
+        margin-right: 0.5rem;
+    }
+}
+.checkbox-switch input[type='checkbox'] + label:after {
+    display: none;
+}
+@media screen and (min-width: 25rem) {
+    .checkbox-switch input[type='checkbox'] + label:after {
+        width: 1.75rem;
+        display: inline-block;
+    }
+}
+.checkbox-switch input[type='checkbox']:checked + label:before {
+    border-color: #1a252f;
+    background: #1a252f;
+    text-align: right;
+    color: white;
+}
+
+.checkbox-switch {
+    font-size: 16px;
+    line-height: 1.618;
+    color: black;
+}
+@media screen and (min-width: 25rem) {
+    .checkbox-switch {
+        font-size: 18px;
+    }
+}
diff --git a/src/Components/ToggleButton/ToggleButton.js b/src/Components/ToggleButton/ToggleButton.js
new file mode 100644
index 0000000..833bfe6
--- /dev/null
+++ b/src/Components/ToggleButton/ToggleButton.js
@@ -0,0 +1,35 @@
+import React, { useState } from 'react';
+import './ToggleButton.css';
+import PropTypes from 'prop-types';
+export const ToggleButton = ({ checkedText, onToggle, toggleState }) => {
+    const [toggle, setToggle] = useState(toggleState ?? false);
+    function toggleButton() {
+        if (!toggle) {
+            setToggle(true);
+            onToggle(true);
+        } else {
+            setToggle(false);
+            onToggle(false);
+        }
+    }
+    return (
+        <span className="checkbox-switch">
+            <input
+                type="checkbox"
+                checked={toggle}
+                id="toggleButton"
+                aria-label="test"
+                onChange={() => toggleButton()}
+            />
+            <label htmlFor="toggleButton" className="checkbox-right">
+                {checkedText}
+            </label>
+        </span>
+    );
+};
+ToggleButton.propTypes = {
+    onToggle: PropTypes.func.isRequired,
+    checkedText: PropTypes.string,
+    toggleState: PropTypes.bool,
+};
+export default ToggleButton;
diff --git a/src/Components/ToggleButton/ToggleButton.test.js b/src/Components/ToggleButton/ToggleButton.test.js
new file mode 100644
index 0000000..531af54
--- /dev/null
+++ b/src/Components/ToggleButton/ToggleButton.test.js
@@ -0,0 +1,49 @@
+import React from 'react';
+import ToggleButton from './ToggleButton';
+import { render, fireEvent } from '@testing-library/react';
+describe('Toggle button dom', () => {
+    test('Should contain intial value', () => {
+        const { container } = render(
+            <ToggleButton
+                checkedText="Expand"
+                onToggle={function () {}}
+                toggleState={false}
+            ></ToggleButton>,
+        );
+        expect(container.querySelector('label')).toHaveTextContent('Expand');
+        expect(container.querySelector('input')).not.toBeChecked();
+    });
+});
+describe('Toggle button fire event', () => {
+    test('Should toggle', () => {
+        const { container } = render(
+            <ToggleButton
+                checkedText="Expand"
+                onToggle={function () {}}
+                toggleState={false}
+            ></ToggleButton>,
+        );
+        fireEvent.click(container.querySelector('input'));
+        expect(container.querySelector('input')).toBeChecked();
+        fireEvent.click(container.querySelector('input'));
+        expect(container.querySelector('input')).not.toBeChecked();
+    });
+
+    test('Should toggle', () => {
+        const mockCallback = jest.fn();
+        const { container } = render(
+            <ToggleButton
+                checkedText="Expand"
+                onToggle={mockCallback}
+                toggleState={false}
+            ></ToggleButton>,
+        );
+        fireEvent.click(container.querySelector('input'));
+        expect(mockCallback).toBeCalledTimes(1);
+        expect(mockCallback).toBeCalledWith(true);
+        mockCallback.mockReset();
+        fireEvent.click(container.querySelector('input'));
+        expect(mockCallback).toBeCalledTimes(1);
+        expect(mockCallback).toBeCalledWith(false);
+    });
+});
diff --git a/src/Components/TreeView/ParentNode.js b/src/Components/TreeView/ParentNode.js
index 20e0575..e173546 100644
--- a/src/Components/TreeView/ParentNode.js
+++ b/src/Components/TreeView/ParentNode.js
@@ -6,8 +6,6 @@ export default class ParentNode extends Component {
         super(props);
         this.state = {
             item: this.props.item,
-            caretClass: this.props.expandMenuItems ? 'caret-down' : '',
-            nestedClass: this.props.expandMenuItems ? 'active' : '',
         };
     }
     onTreeCaretClick(e) {
@@ -17,11 +15,19 @@ export default class ParentNode extends Component {
         e.target.classList.toggle('caret-down');
     }
 
+    getCaretClassName() {
+        return this.props.expandMenuItems ? 'caret-down' : '';
+    }
+
+    getNestedClassName() {
+        return this.props.expandMenuItems ? 'active' : '';
+    }
+
     render() {
         return (
             <li>
                 <span
-                    className={`caret ${this.state.caretClass}`}
+                    className={`caret ${this.getCaretClassName()}`}
                     onClick={event => {
                         return this.onTreeCaretClick(event);
                     }}
@@ -34,7 +40,7 @@ export default class ParentNode extends Component {
                 >
                     {this.props.item.title}
                 </span>
-                <ul className={`nested ${this.state.nestedClass}`}>
+                <ul className={`nested ${this.getNestedClassName()}`}>
                     <Treenode
                         expandMenuItems={this.props.expandMenuItems}
                         treeViewData={this.props.item.children}
diff --git a/src/__snapshots__/App.test.js.snap b/src/__snapshots__/App.test.js.snap
deleted file mode 100644
index ae606ba..0000000
--- a/src/__snapshots__/App.test.js.snap
+++ /dev/null
@@ -1,1203 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Tree click Should call function on tree node click 1`] = `
-<div
-  class="main"
->
-  <div
-    class="summary"
-  >
-    <span
-      class="dot green"
-    >
-      <a
-        href="#Passed"
-      >
-        7
-      </a>
-      <span>
-        Passed
-      </span>
-    </span>
-    <span
-      class="dot orange"
-    >
-      <a
-        href="#Pending"
-      >
-        0
-      </a>
-      <span>
-        Pending
-      </span>
-    </span>
-    <span
-      class="dot red"
-    >
-      <a
-        href="#Failed"
-      >
-        2
-      </a>
-      <span>
-        Failed
-      </span>
-    </span>
-    <span
-      class="dot blue"
-    >
-      <a
-        href="#Total"
-      >
-        9
-      </a>
-      <span>
-        Total
-      </span>
-    </span>
-    <span
-      class="dot gray"
-    >
-      <a
-        href="#Todo"
-      >
-        0
-      </a>
-      <span>
-        Todo
-      </span>
-    </span>
-  </div>
-  <div
-    class="infoWrapper"
-  >
-    <div
-      class="box box1"
-    >
-      Start Time
-    </div>
-    <div
-      class="box box2"
-    />
-    <div
-      class="box box1"
-    >
-      Interupted
-    </div>
-    <div
-      class="box box2"
-    >
-      No
-    </div>
-  </div>
-  <div>
-    <p>
-      Filter:
-       
-      <label
-        class="checkboxLabel"
-      >
-        passed
-        <input
-          id="passed"
-          type="checkbox"
-          value="passed"
-        />
-        <span
-          class="checkboxSpan"
-        />
-      </label>
-      <label
-        class="checkboxLabel"
-      >
-        failed
-        <input
-          id="failed"
-          type="checkbox"
-          value="failed"
-        />
-        <span
-          class="checkboxSpan"
-        />
-      </label>
-      <label
-        class="checkboxLabel"
-      >
-        todo
-        <input
-          id="todo"
-          type="checkbox"
-          value="todo"
-        />
-        <span
-          class="checkboxSpan"
-        />
-      </label>
-      <label
-        class="checkboxLabel"
-      >
-        pending
-        <input
-          id="pending"
-          type="checkbox"
-          value="pending"
-        />
-        <span
-          class="checkboxSpan"
-        />
-      </label>
-    </p>
-  </div>
-  <div
-    class="row tableheader"
-  >
-    <div
-      class="column testcase"
-    >
-      Test case
-    </div>
-    <div
-      class="column result"
-    >
-      Result
-    </div>
-    <div
-      class="column time"
-    >
-      Time
-    </div>
-    <div
-      class="column information"
-    >
-      Additonal information
-    </div>
-  </div>
-  <div
-    class="tabs"
-  >
-    <input
-      class="togglerCheckBox"
-      id="elem_id4"
-      type="checkbox"
-    />
-    <label
-      class="tab-label"
-      for="elem_id4"
-    >
-      outer 0
-      <span
-        class="numberCircleParent"
-      >
-        <span
-          class="numberCircle green"
-        >
-          7
-        </span>
-        <span
-          class="numberCircle orange"
-        >
-          0
-        </span>
-        <span
-          class="numberCircle red"
-        >
-          2
-        </span>
-        <span
-          class="numberCircle blue"
-        >
-          9
-        </span>
-        <span
-          class="numberCircle gray"
-        >
-          0
-        </span>
-      </span>
-    </label>
-    <div
-      class="tab-content row"
-    >
-      <div
-        class="tabs"
-      >
-        <input
-          class="togglerCheckBox"
-          id="elem_id5"
-          type="checkbox"
-        />
-        <label
-          class="tab-label"
-          for="elem_id5"
-        >
-          outer 1
-          <span
-            class="numberCircleParent"
-          >
-            <span
-              class="numberCircle green"
-            >
-              7
-            </span>
-            <span
-              class="numberCircle orange"
-            >
-              0
-            </span>
-            <span
-              class="numberCircle red"
-            >
-              2
-            </span>
-            <span
-              class="numberCircle blue"
-            >
-              9
-            </span>
-            <span
-              class="numberCircle gray"
-            >
-              0
-            </span>
-          </span>
-        </label>
-        <div
-          class="tab-content row"
-        >
-          <div
-            class="tabs"
-          >
-            <input
-              class="togglerCheckBox"
-              id="elem_id6"
-              type="checkbox"
-            />
-            <label
-              class="tab-label"
-              for="elem_id6"
-            >
-              outer 2
-              <span
-                class="numberCircleParent"
-              >
-                <span
-                  class="numberCircle green"
-                >
-                  7
-                </span>
-                <span
-                  class="numberCircle orange"
-                >
-                  0
-                </span>
-                <span
-                  class="numberCircle red"
-                >
-                  2
-                </span>
-                <span
-                  class="numberCircle blue"
-                >
-                  9
-                </span>
-                <span
-                  class="numberCircle gray"
-                >
-                  0
-                </span>
-              </span>
-            </label>
-            <div
-              class="tab-content row"
-            >
-              <div
-                class="column testcase"
-              >
-                should pass
-              </div>
-              <div
-                class="column result status"
-              >
-                <i>
-                  <svg
-                    aria-label="passed"
-                    class="passed statusicon"
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    version="1.1"
-                    viewBox="0 0 16 16"
-                    width="1em"
-                  >
-                    <path
-                      d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
-                </i>
-                passed
-              </div>
-              <div
-                class="column time"
-              >
-                2 ms
-              </div>
-              <div
-                class="column information"
-              >
-                <div
-                  class="informationiconwrapper"
-                >
-                  <i>
-                    <svg
-                      aria-label="more information"
-                      class="informationicon"
-                      data-icon="exclamation-circle"
-                      fill="currentColor"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 0 1 0-96 48.01 48.01 0 0 1 0 96z"
-                      />
-                    </svg>
-                  </i>
-                   
-                  Info
-                </div>
-              </div>
-              <div
-                class="tabs"
-              >
-                <input
-                  class="togglerCheckBox"
-                  id="elem_id9"
-                  type="checkbox"
-                />
-                <label
-                  class="tab-label"
-                  for="elem_id9"
-                >
-                  first outer 3
-                  <span
-                    class="numberCircleParent"
-                  >
-                    <span
-                      class="numberCircle green"
-                    >
-                      1
-                    </span>
-                    <span
-                      class="numberCircle orange"
-                    >
-                      0
-                    </span>
-                    <span
-                      class="numberCircle red"
-                    >
-                      0
-                    </span>
-                    <span
-                      class="numberCircle blue"
-                    >
-                      1
-                    </span>
-                    <span
-                      class="numberCircle gray"
-                    >
-                      0
-                    </span>
-                  </span>
-                </label>
-                <div
-                  class="tab-content row"
-                >
-                  <div
-                    class="tabs"
-                  >
-                    <input
-                      class="togglerCheckBox"
-                      id="elem_id10"
-                      type="checkbox"
-                    />
-                    <label
-                      class="tab-label"
-                      for="elem_id10"
-                    >
-                      outer 4
-                      <span
-                        class="numberCircleParent"
-                      >
-                        <span
-                          class="numberCircle green"
-                        >
-                          1
-                        </span>
-                        <span
-                          class="numberCircle orange"
-                        >
-                          0
-                        </span>
-                        <span
-                          class="numberCircle red"
-                        >
-                          0
-                        </span>
-                        <span
-                          class="numberCircle blue"
-                        >
-                          1
-                        </span>
-                        <span
-                          class="numberCircle gray"
-                        >
-                          0
-                        </span>
-                      </span>
-                    </label>
-                    <div
-                      class="tab-content row"
-                    >
-                      <div
-                        class="column testcase"
-                      >
-                        should pass
-                      </div>
-                      <div
-                        class="column result status"
-                      >
-                        <i>
-                          <svg
-                            aria-label="passed"
-                            class="passed statusicon"
-                            fill="currentColor"
-                            height="1em"
-                            role="img"
-                            version="1.1"
-                            viewBox="0 0 16 16"
-                            width="1em"
-                          >
-                            <path
-                              d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"
-                              fill-rule="evenodd"
-                            />
-                          </svg>
-                        </i>
-                        passed
-                      </div>
-                      <div
-                        class="column time"
-                      />
-                      <div
-                        class="column information"
-                      >
-                        <div
-                          class="informationiconwrapper"
-                        >
-                          <i>
-                            <svg
-                              aria-label="more information"
-                              class="informationicon"
-                              data-icon="exclamation-circle"
-                              fill="currentColor"
-                              height="1em"
-                              viewBox="64 64 896 896"
-                              width="1em"
-                            >
-                              <path
-                                d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 0 1 0-96 48.01 48.01 0 0 1 0 96z"
-                              />
-                            </svg>
-                          </i>
-                           
-                          Info
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="tabs"
-              >
-                <input
-                  class="togglerCheckBox"
-                  id="elem_id13"
-                  type="checkbox"
-                />
-                <label
-                  class="tab-label"
-                  for="elem_id13"
-                >
-                  outer 3
-                  <span
-                    class="numberCircleParent"
-                  >
-                    <span
-                      class="numberCircle green"
-                    >
-                      1
-                    </span>
-                    <span
-                      class="numberCircle orange"
-                    >
-                      0
-                    </span>
-                    <span
-                      class="numberCircle red"
-                    >
-                      1
-                    </span>
-                    <span
-                      class="numberCircle blue"
-                    >
-                      2
-                    </span>
-                    <span
-                      class="numberCircle gray"
-                    >
-                      0
-                    </span>
-                  </span>
-                </label>
-                <div
-                  class="tab-content row"
-                >
-                  <div
-                    class="tabs"
-                  >
-                    <input
-                      class="togglerCheckBox"
-                      id="elem_id14"
-                      type="checkbox"
-                    />
-                    <label
-                      class="tab-label"
-                      for="elem_id14"
-                    >
-                      outer 4
-                      <span
-                        class="numberCircleParent"
-                      >
-                        <span
-                          class="numberCircle green"
-                        >
-                          1
-                        </span>
-                        <span
-                          class="numberCircle orange"
-                        >
-                          0
-                        </span>
-                        <span
-                          class="numberCircle red"
-                        >
-                          1
-                        </span>
-                        <span
-                          class="numberCircle blue"
-                        >
-                          2
-                        </span>
-                        <span
-                          class="numberCircle gray"
-                        >
-                          0
-                        </span>
-                      </span>
-                    </label>
-                    <div
-                      class="tab-content row"
-                    >
-                      <div
-                        class="column testcase"
-                      >
-                        should pass
-                      </div>
-                      <div
-                        class="column result status"
-                      >
-                        <i>
-                          <svg
-                            aria-label="passed"
-                            class="passed statusicon"
-                            fill="currentColor"
-                            height="1em"
-                            role="img"
-                            version="1.1"
-                            viewBox="0 0 16 16"
-                            width="1em"
-                          >
-                            <path
-                              d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"
-                              fill-rule="evenodd"
-                            />
-                          </svg>
-                        </i>
-                        passed
-                      </div>
-                      <div
-                        class="column time"
-                      />
-                      <div
-                        class="column information"
-                      >
-                        <div
-                          class="informationiconwrapper"
-                        >
-                          <i>
-                            <svg
-                              aria-label="more information"
-                              class="informationicon"
-                              data-icon="exclamation-circle"
-                              fill="currentColor"
-                              height="1em"
-                              viewBox="64 64 896 896"
-                              width="1em"
-                            >
-                              <path
-                                d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 0 1 0-96 48.01 48.01 0 0 1 0 96z"
-                              />
-                            </svg>
-                          </i>
-                           
-                          Info
-                        </div>
-                      </div>
-                      <div
-                        class="column testcase"
-                      >
-                        should fail
-                      </div>
-                      <div
-                        class="column result status"
-                      >
-                        <i>
-                          <svg
-                            aria-label="failed"
-                            class="failed statusicon"
-                            fill="currentColor"
-                            height="1em"
-                            role="img"
-                            version="1.1"
-                            viewBox="0 0 16 16"
-                            width="1em"
-                          >
-                            <path
-                              d="M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z"
-                              fill-rule="evenodd"
-                            />
-                          </svg>
-                        </i>
-                        failed
-                      </div>
-                      <div
-                        class="column time"
-                      >
-                        110 ms
-                      </div>
-                      <div
-                        class="column information"
-                      >
-                        <div
-                          class="informationiconwrapper"
-                        >
-                          <i>
-                            <svg
-                              aria-label="more information"
-                              class="informationicon"
-                              data-icon="exclamation-circle"
-                              fill="currentColor"
-                              height="1em"
-                              viewBox="64 64 896 896"
-                              width="1em"
-                            >
-                              <path
-                                d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 0 1 0-96 48.01 48.01 0 0 1 0 96z"
-                              />
-                            </svg>
-                          </i>
-                           
-                          Info
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="tabs"
-              >
-                <input
-                  class="togglerCheckBox"
-                  id="elem_id19"
-                  type="checkbox"
-                />
-                <label
-                  class="tab-label"
-                  for="elem_id19"
-                >
-                  next outer 3
-                  <span
-                    class="numberCircleParent"
-                  >
-                    <span
-                      class="numberCircle green"
-                    >
-                      3
-                    </span>
-                    <span
-                      class="numberCircle orange"
-                    >
-                      0
-                    </span>
-                    <span
-                      class="numberCircle red"
-                    >
-                      1
-                    </span>
-                    <span
-                      class="numberCircle blue"
-                    >
-                      4
-                    </span>
-                    <span
-                      class="numberCircle gray"
-                    >
-                      0
-                    </span>
-                  </span>
-                </label>
-                <div
-                  class="tab-content row"
-                >
-                  <div
-                    class="column testcase"
-                  >
-                    should be around
-                  </div>
-                  <div
-                    class="column result status"
-                  >
-                    <i>
-                      <svg
-                        aria-label="passed"
-                        class="passed statusicon"
-                        fill="currentColor"
-                        height="1em"
-                        role="img"
-                        version="1.1"
-                        viewBox="0 0 16 16"
-                        width="1em"
-                      >
-                        <path
-                          d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </i>
-                    passed
-                  </div>
-                  <div
-                    class="column time"
-                  />
-                  <div
-                    class="column information"
-                  >
-                    <div
-                      class="informationiconwrapper"
-                    >
-                      <i>
-                        <svg
-                          aria-label="more information"
-                          class="informationicon"
-                          data-icon="exclamation-circle"
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="64 64 896 896"
-                          width="1em"
-                        >
-                          <path
-                            d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 0 1 0-96 48.01 48.01 0 0 1 0 96z"
-                          />
-                        </svg>
-                      </i>
-                       
-                      Info
-                    </div>
-                  </div>
-                  <div
-                    class="tabs"
-                  >
-                    <input
-                      class="togglerCheckBox"
-                      id="elem_id22"
-                      type="checkbox"
-                    />
-                    <label
-                      class="tab-label"
-                      for="elem_id22"
-                    >
-                      outer 4
-                      <span
-                        class="numberCircleParent"
-                      >
-                        <span
-                          class="numberCircle green"
-                        >
-                          1
-                        </span>
-                        <span
-                          class="numberCircle orange"
-                        >
-                          0
-                        </span>
-                        <span
-                          class="numberCircle red"
-                        >
-                          1
-                        </span>
-                        <span
-                          class="numberCircle blue"
-                        >
-                          2
-                        </span>
-                        <span
-                          class="numberCircle gray"
-                        >
-                          0
-                        </span>
-                      </span>
-                    </label>
-                    <div
-                      class="tab-content row"
-                    >
-                      <div
-                        class="column testcase"
-                      >
-                        should pass
-                      </div>
-                      <div
-                        class="column result status"
-                      >
-                        <i>
-                          <svg
-                            aria-label="passed"
-                            class="passed statusicon"
-                            fill="currentColor"
-                            height="1em"
-                            role="img"
-                            version="1.1"
-                            viewBox="0 0 16 16"
-                            width="1em"
-                          >
-                            <path
-                              d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"
-                              fill-rule="evenodd"
-                            />
-                          </svg>
-                        </i>
-                        passed
-                      </div>
-                      <div
-                        class="column time"
-                      />
-                      <div
-                        class="column information"
-                      >
-                        <div
-                          class="informationiconwrapper"
-                        >
-                          <i>
-                            <svg
-                              aria-label="more information"
-                              class="informationicon"
-                              data-icon="exclamation-circle"
-                              fill="currentColor"
-                              height="1em"
-                              viewBox="64 64 896 896"
-                              width="1em"
-                            >
-                              <path
-                                d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 0 1 0-96 48.01 48.01 0 0 1 0 96z"
-                              />
-                            </svg>
-                          </i>
-                           
-                          Info
-                        </div>
-                      </div>
-                      <div
-                        class="column testcase"
-                      >
-                        should fail
-                      </div>
-                      <div
-                        class="column result status"
-                      >
-                        <i>
-                          <svg
-                            aria-label="failed"
-                            class="failed statusicon"
-                            fill="currentColor"
-                            height="1em"
-                            role="img"
-                            version="1.1"
-                            viewBox="0 0 16 16"
-                            width="1em"
-                          >
-                            <path
-                              d="M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z"
-                              fill-rule="evenodd"
-                            />
-                          </svg>
-                        </i>
-                        failed
-                      </div>
-                      <div
-                        class="column time"
-                      />
-                      <div
-                        class="column information"
-                      >
-                        <div
-                          class="informationiconwrapper"
-                        >
-                          <i>
-                            <svg
-                              aria-label="more information"
-                              class="informationicon"
-                              data-icon="exclamation-circle"
-                              fill="currentColor"
-                              height="1em"
-                              viewBox="64 64 896 896"
-                              width="1em"
-                            >
-                              <path
-                                d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 0 1 0-96 48.01 48.01 0 0 1 0 96z"
-                              />
-                            </svg>
-                          </i>
-                           
-                          Info
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                  <div
-                    class="column testcase"
-                  >
-                    should be around too
-                  </div>
-                  <div
-                    class="column result status"
-                  >
-                    <i>
-                      <svg
-                        aria-label="passed"
-                        class="passed statusicon"
-                        fill="currentColor"
-                        height="1em"
-                        role="img"
-                        version="1.1"
-                        viewBox="0 0 16 16"
-                        width="1em"
-                      >
-                        <path
-                          d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </i>
-                    passed
-                  </div>
-                  <div
-                    class="column time"
-                  />
-                  <div
-                    class="column information"
-                  >
-                    <div
-                      class="informationiconwrapper"
-                    >
-                      <i>
-                        <svg
-                          aria-label="more information"
-                          class="informationicon"
-                          data-icon="exclamation-circle"
-                          fill="currentColor"
-                          height="1em"
-                          viewBox="64 64 896 896"
-                          width="1em"
-                        >
-                          <path
-                            d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 0 1 0-96 48.01 48.01 0 0 1 0 96z"
-                          />
-                        </svg>
-                      </i>
-                       
-                      Info
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="tabs"
-              >
-                <input
-                  class="togglerCheckBox"
-                  id="elem_id29"
-                  type="checkbox"
-                />
-                <label
-                  class="tab-label"
-                  for="elem_id29"
-                >
-                  last outer 3
-                  <span
-                    class="numberCircleParent"
-                  >
-                    <span
-                      class="numberCircle green"
-                    >
-                      1
-                    </span>
-                    <span
-                      class="numberCircle orange"
-                    >
-                      0
-                    </span>
-                    <span
-                      class="numberCircle red"
-                    >
-                      0
-                    </span>
-                    <span
-                      class="numberCircle blue"
-                    >
-                      1
-                    </span>
-                    <span
-                      class="numberCircle gray"
-                    >
-                      0
-                    </span>
-                  </span>
-                </label>
-                <div
-                  class="tab-content row"
-                >
-                  <div
-                    class="tabs"
-                  >
-                    <input
-                      class="togglerCheckBox"
-                      id="elem_id30"
-                      type="checkbox"
-                    />
-                    <label
-                      class="tab-label"
-                      for="elem_id30"
-                    >
-                      outer 4
-                      <span
-                        class="numberCircleParent"
-                      >
-                        <span
-                          class="numberCircle green"
-                        >
-                          1
-                        </span>
-                        <span
-                          class="numberCircle orange"
-                        >
-                          0
-                        </span>
-                        <span
-                          class="numberCircle red"
-                        >
-                          0
-                        </span>
-                        <span
-                          class="numberCircle blue"
-                        >
-                          1
-                        </span>
-                        <span
-                          class="numberCircle gray"
-                        >
-                          0
-                        </span>
-                      </span>
-                    </label>
-                    <div
-                      class="tab-content row"
-                    >
-                      <div
-                        class="column testcase"
-                      >
-                        should pass
-                      </div>
-                      <div
-                        class="column result status"
-                      >
-                        <i>
-                          <svg
-                            aria-label="passed"
-                            class="passed statusicon"
-                            fill="currentColor"
-                            height="1em"
-                            role="img"
-                            version="1.1"
-                            viewBox="0 0 16 16"
-                            width="1em"
-                          >
-                            <path
-                              d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"
-                              fill-rule="evenodd"
-                            />
-                          </svg>
-                        </i>
-                        passed
-                      </div>
-                      <div
-                        class="column time"
-                      />
-                      <div
-                        class="column information"
-                      >
-                        <div
-                          class="informationiconwrapper"
-                        >
-                          <i>
-                            <svg
-                              aria-label="more information"
-                              class="informationicon"
-                              data-icon="exclamation-circle"
-                              fill="currentColor"
-                              height="1em"
-                              viewBox="64 64 896 896"
-                              width="1em"
-                            >
-                              <path
-                                d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 0 1 0-96 48.01 48.01 0 0 1 0 96z"
-                              />
-                            </svg>
-                          </i>
-                           
-                          Info
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;