diff --git a/src/components/sidebar-toggle-button/README.md b/src/components/sidebar-toggle-button/README.md
new file mode 100644
index 0000000000..6fa7715fc0
--- /dev/null
+++ b/src/components/sidebar-toggle-button/README.md
@@ -0,0 +1,14 @@
+### Examples
+**Open**
+```js
+<SidebarToggleButton isOpen/>
+```
+**Closed**
+```js
+<SidebarToggleButton isOpen={false}/>
+```
+**When sidebar is on the left, change the direction**
+```js
+<SidebarToggleButton direction="left" isOpen/>
+```
+
diff --git a/src/components/sidebar-toggle-button/SidebarToggleButton.js b/src/components/sidebar-toggle-button/SidebarToggleButton.js
new file mode 100644
index 0000000000..426412d4b7
--- /dev/null
+++ b/src/components/sidebar-toggle-button/SidebarToggleButton.js
@@ -0,0 +1,57 @@
+// @flow
+import * as React from 'react';
+import classNames from 'classnames';
+import { injectIntl } from 'react-intl';
+
+import IconHide from '../../icons/general/IconHide';
+import IconShow from '../../icons/general/IconShow';
+import PlainButton from '../plain-button';
+import Tooltip from '../tooltip';
+
+import messages from '../../elements/common/messages';
+
+import './SidebarToggleButton.scss';
+
+const DIRECTION_LEFT = 'left';
+const DIRECTION_RIGHT = 'right';
+
+type Props = {
+    className?: string,
+    direction?: string,
+    isOpen: boolean,
+    onClick?: Function,
+} & InjectIntlProvidedProps;
+
+const SidebarToggleButton = ({
+    className = '',
+    direction = DIRECTION_RIGHT,
+    intl,
+    isOpen,
+    onClick,
+    ...rest
+}: Props) => {
+    const isCollapsed = !isOpen ? 'collapsed' : '';
+    const intlMessage = isOpen ? messages.sidebarHide : messages.sidebarShow;
+    const intlText = intl.formatMessage(intlMessage);
+    const classes = classNames(className, 'bdl-SidebarToggleButton', {
+        'bdl-is-collapsed': isCollapsed,
+    });
+    const tooltipPosition = direction === DIRECTION_LEFT ? 'middle-right' : 'middle-left';
+
+    const renderButton = () => {
+        if (direction === DIRECTION_LEFT) {
+            return isOpen ? <IconShow height={16} width={16} /> : <IconHide height={16} width={16} />;
+        }
+        return isOpen ? <IconHide height={16} width={16} /> : <IconShow height={16} width={16} />;
+    };
+
+    return (
+        <Tooltip position={tooltipPosition} text={intlText}>
+            <PlainButton aria-label={intlText} className={classes} onClick={onClick} type="button" {...rest}>
+                {renderButton()}
+            </PlainButton>
+        </Tooltip>
+    );
+};
+
+export default injectIntl(SidebarToggleButton);
diff --git a/src/components/sidebar-toggle-button/SidebarToggleButton.scss b/src/components/sidebar-toggle-button/SidebarToggleButton.scss
new file mode 100644
index 0000000000..490a9ee003
--- /dev/null
+++ b/src/components/sidebar-toggle-button/SidebarToggleButton.scss
@@ -0,0 +1,29 @@
+@import '../../styles/variables';
+
+.bdl-SidebarToggleButton {
+    border-radius: $bdl-border-radius-size;
+    margin: 0 3px;
+    padding: 4px;
+
+    path {
+        fill: $bdl-gray-50;
+    }
+
+    &:not(.is-disabled):hover {
+        background-color: $bdl-gray-05;
+    }
+
+    &:not(.is-disabled):focus {
+        border-color: #96a0a6;
+        box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
+    }
+
+    &.bdl-is-collapsed,
+    &.bdl-is-collapsed:hover {
+        background-color: $bdl-box-blue;
+
+        path {
+            fill: $white;
+        }
+    }
+}
diff --git a/src/components/sidebar-toggle-button/__tests__/SidebarToggleButton-test.js b/src/components/sidebar-toggle-button/__tests__/SidebarToggleButton-test.js
new file mode 100644
index 0000000000..7e4843a9fa
--- /dev/null
+++ b/src/components/sidebar-toggle-button/__tests__/SidebarToggleButton-test.js
@@ -0,0 +1,35 @@
+import React from 'react';
+
+import SidebarToggleButton from '..';
+
+describe('components/sidebar-toggle-button/SidebarToggleButton', () => {
+    test('should render correctly as open', () => {
+        const wrapper = mount(<SidebarToggleButton isOpen />);
+
+        expect(wrapper).toMatchSnapshot();
+    });
+
+    test('should render correctly as closed', () => {
+        const wrapper = mount(<SidebarToggleButton isOpen={false} />);
+
+        expect(wrapper).toMatchSnapshot();
+    });
+
+    test('should have the proper class when it is collapsed', () => {
+        const wrapper = mount(<SidebarToggleButton isOpen={false} />);
+
+        expect(wrapper.find('PlainButton').hasClass('bdl-is-collapsed')).toBeTruthy();
+    });
+
+    test('should render correctly as left oriented toggle when open', () => {
+        const wrapper = mount(<SidebarToggleButton direction="left" isOpen />);
+
+        expect(wrapper).toMatchSnapshot();
+    });
+
+    test('should render correctly as left oriented toggle when closed', () => {
+        const wrapper = mount(<SidebarToggleButton direction="left" isOpen={false} />);
+
+        expect(wrapper).toMatchSnapshot();
+    });
+});
diff --git a/src/components/sidebar-toggle-button/__tests__/__snapshots__/SidebarToggleButton-test.js.snap b/src/components/sidebar-toggle-button/__tests__/__snapshots__/SidebarToggleButton-test.js.snap
new file mode 100644
index 0000000000..e779a1a9a0
--- /dev/null
+++ b/src/components/sidebar-toggle-button/__tests__/__snapshots__/SidebarToggleButton-test.js.snap
@@ -0,0 +1,385 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`components/sidebar-toggle-button/SidebarToggleButton should render correctly as closed 1`] = `
+<SidebarToggleButton
+  isOpen={false}
+>
+  <SidebarToggleButton
+    intl={
+      Object {
+        "formatDate": [Function],
+        "formatMessage": [Function],
+      }
+    }
+    isOpen={false}
+  >
+    <Tooltip
+      constrainToScrollParent={false}
+      constrainToWindow={true}
+      isDisabled={false}
+      position="middle-left"
+      text="Show Sidebar"
+      theme="default"
+    >
+      <TetherComponent
+        attachment="middle right"
+        bodyElement={<body />}
+        classPrefix="tooltip"
+        constraints={
+          Array [
+            Object {
+              "attachment": "together",
+              "to": "window",
+            },
+          ]
+        }
+        enabled={false}
+        renderElementTag="div"
+        renderElementTo={null}
+        targetAttachment="middle left"
+      >
+        <PlainButton
+          aria-label="Show Sidebar"
+          className="bdl-SidebarToggleButton bdl-is-collapsed"
+          key=".0"
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+          tabIndex="0"
+          type="button"
+        >
+          <button
+            aria-label="Show Sidebar"
+            className="btn-plain bdl-SidebarToggleButton bdl-is-collapsed"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onKeyDown={[Function]}
+            onMouseEnter={[Function]}
+            onMouseLeave={[Function]}
+            tabIndex="0"
+            type="button"
+          >
+            <IconShow
+              height={16}
+              width={16}
+            >
+              <AccessibleSVG
+                className="icon-show "
+                height={16}
+                viewBox="0 0 16 16"
+                width={16}
+              >
+                <svg
+                  className="icon-show "
+                  focusable="false"
+                  height={16}
+                  role="presentation"
+                  viewBox="0 0 16 16"
+                  width={16}
+                >
+                  <path
+                    d="M7.354 7.646l3.292-3.292a.5.5 0 0 0 0-.708L9.354 2.354a.5.5 0 0 0-.708 0L3.354 7.646a.5.5 0 0 0 0 .708l5.292 5.292a.5.5 0 0 0 .708 0l1.292-1.292a.5.5 0 0 0 0-.708L7.354 8.354a.5.5 0 0 1 0-.708z"
+                    fill="#909090"
+                    fillRule="nonzero"
+                  />
+                </svg>
+              </AccessibleSVG>
+            </IconShow>
+          </button>
+        </PlainButton>
+      </TetherComponent>
+    </Tooltip>
+  </SidebarToggleButton>
+</SidebarToggleButton>
+`;
+
+exports[`components/sidebar-toggle-button/SidebarToggleButton should render correctly as left oriented toggle when closed 1`] = `
+<SidebarToggleButton
+  direction="left"
+  isOpen={false}
+>
+  <SidebarToggleButton
+    direction="left"
+    intl={
+      Object {
+        "formatDate": [Function],
+        "formatMessage": [Function],
+      }
+    }
+    isOpen={false}
+  >
+    <Tooltip
+      constrainToScrollParent={false}
+      constrainToWindow={true}
+      isDisabled={false}
+      position="middle-right"
+      text="Show Sidebar"
+      theme="default"
+    >
+      <TetherComponent
+        attachment="middle left"
+        bodyElement={<body />}
+        classPrefix="tooltip"
+        constraints={
+          Array [
+            Object {
+              "attachment": "together",
+              "to": "window",
+            },
+          ]
+        }
+        enabled={false}
+        renderElementTag="div"
+        renderElementTo={null}
+        targetAttachment="middle right"
+      >
+        <PlainButton
+          aria-label="Show Sidebar"
+          className="bdl-SidebarToggleButton bdl-is-collapsed"
+          key=".0"
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+          tabIndex="0"
+          type="button"
+        >
+          <button
+            aria-label="Show Sidebar"
+            className="btn-plain bdl-SidebarToggleButton bdl-is-collapsed"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onKeyDown={[Function]}
+            onMouseEnter={[Function]}
+            onMouseLeave={[Function]}
+            tabIndex="0"
+            type="button"
+          >
+            <IconHide
+              height={16}
+              width={16}
+            >
+              <AccessibleSVG
+                className="icon-hide "
+                height={16}
+                viewBox="0 0 16 16"
+                width={16}
+              >
+                <svg
+                  className="icon-hide "
+                  focusable="false"
+                  height={16}
+                  role="presentation"
+                  viewBox="0 0 16 16"
+                  width={16}
+                >
+                  <path
+                    d="M7.646 7.646L4.354 4.354a.5.5 0 0 1 0-.708l1.292-1.292a.5.5 0 0 1 .708 0l5.292 5.292a.5.5 0 0 1 0 .708l-5.292 5.292a.5.5 0 0 1-.708 0l-1.292-1.292a.5.5 0 0 1 0-.708l3.292-3.292a.5.5 0 0 0 0-.708z"
+                    fill="#909090"
+                    fillRule="nonzero"
+                  />
+                </svg>
+              </AccessibleSVG>
+            </IconHide>
+          </button>
+        </PlainButton>
+      </TetherComponent>
+    </Tooltip>
+  </SidebarToggleButton>
+</SidebarToggleButton>
+`;
+
+exports[`components/sidebar-toggle-button/SidebarToggleButton should render correctly as left oriented toggle when open 1`] = `
+<SidebarToggleButton
+  direction="left"
+  isOpen={true}
+>
+  <SidebarToggleButton
+    direction="left"
+    intl={
+      Object {
+        "formatDate": [Function],
+        "formatMessage": [Function],
+      }
+    }
+    isOpen={true}
+  >
+    <Tooltip
+      constrainToScrollParent={false}
+      constrainToWindow={true}
+      isDisabled={false}
+      position="middle-right"
+      text="Hide Sidebar"
+      theme="default"
+    >
+      <TetherComponent
+        attachment="middle left"
+        bodyElement={<body />}
+        classPrefix="tooltip"
+        constraints={
+          Array [
+            Object {
+              "attachment": "together",
+              "to": "window",
+            },
+          ]
+        }
+        enabled={false}
+        renderElementTag="div"
+        renderElementTo={null}
+        targetAttachment="middle right"
+      >
+        <PlainButton
+          aria-label="Hide Sidebar"
+          className="bdl-SidebarToggleButton"
+          key=".0"
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+          tabIndex="0"
+          type="button"
+        >
+          <button
+            aria-label="Hide Sidebar"
+            className="btn-plain bdl-SidebarToggleButton"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onKeyDown={[Function]}
+            onMouseEnter={[Function]}
+            onMouseLeave={[Function]}
+            tabIndex="0"
+            type="button"
+          >
+            <IconShow
+              height={16}
+              width={16}
+            >
+              <AccessibleSVG
+                className="icon-show "
+                height={16}
+                viewBox="0 0 16 16"
+                width={16}
+              >
+                <svg
+                  className="icon-show "
+                  focusable="false"
+                  height={16}
+                  role="presentation"
+                  viewBox="0 0 16 16"
+                  width={16}
+                >
+                  <path
+                    d="M7.354 7.646l3.292-3.292a.5.5 0 0 0 0-.708L9.354 2.354a.5.5 0 0 0-.708 0L3.354 7.646a.5.5 0 0 0 0 .708l5.292 5.292a.5.5 0 0 0 .708 0l1.292-1.292a.5.5 0 0 0 0-.708L7.354 8.354a.5.5 0 0 1 0-.708z"
+                    fill="#909090"
+                    fillRule="nonzero"
+                  />
+                </svg>
+              </AccessibleSVG>
+            </IconShow>
+          </button>
+        </PlainButton>
+      </TetherComponent>
+    </Tooltip>
+  </SidebarToggleButton>
+</SidebarToggleButton>
+`;
+
+exports[`components/sidebar-toggle-button/SidebarToggleButton should render correctly as open 1`] = `
+<SidebarToggleButton
+  isOpen={true}
+>
+  <SidebarToggleButton
+    intl={
+      Object {
+        "formatDate": [Function],
+        "formatMessage": [Function],
+      }
+    }
+    isOpen={true}
+  >
+    <Tooltip
+      constrainToScrollParent={false}
+      constrainToWindow={true}
+      isDisabled={false}
+      position="middle-left"
+      text="Hide Sidebar"
+      theme="default"
+    >
+      <TetherComponent
+        attachment="middle right"
+        bodyElement={<body />}
+        classPrefix="tooltip"
+        constraints={
+          Array [
+            Object {
+              "attachment": "together",
+              "to": "window",
+            },
+          ]
+        }
+        enabled={false}
+        renderElementTag="div"
+        renderElementTo={null}
+        targetAttachment="middle left"
+      >
+        <PlainButton
+          aria-label="Hide Sidebar"
+          className="bdl-SidebarToggleButton"
+          key=".0"
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+          tabIndex="0"
+          type="button"
+        >
+          <button
+            aria-label="Hide Sidebar"
+            className="btn-plain bdl-SidebarToggleButton"
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onKeyDown={[Function]}
+            onMouseEnter={[Function]}
+            onMouseLeave={[Function]}
+            tabIndex="0"
+            type="button"
+          >
+            <IconHide
+              height={16}
+              width={16}
+            >
+              <AccessibleSVG
+                className="icon-hide "
+                height={16}
+                viewBox="0 0 16 16"
+                width={16}
+              >
+                <svg
+                  className="icon-hide "
+                  focusable="false"
+                  height={16}
+                  role="presentation"
+                  viewBox="0 0 16 16"
+                  width={16}
+                >
+                  <path
+                    d="M7.646 7.646L4.354 4.354a.5.5 0 0 1 0-.708l1.292-1.292a.5.5 0 0 1 .708 0l5.292 5.292a.5.5 0 0 1 0 .708l-5.292 5.292a.5.5 0 0 1-.708 0l-1.292-1.292a.5.5 0 0 1 0-.708l3.292-3.292a.5.5 0 0 0 0-.708z"
+                    fill="#909090"
+                    fillRule="nonzero"
+                  />
+                </svg>
+              </AccessibleSVG>
+            </IconHide>
+          </button>
+        </PlainButton>
+      </TetherComponent>
+    </Tooltip>
+  </SidebarToggleButton>
+</SidebarToggleButton>
+`;
diff --git a/src/components/sidebar-toggle-button/index.js b/src/components/sidebar-toggle-button/index.js
new file mode 100644
index 0000000000..ebb60dbd59
--- /dev/null
+++ b/src/components/sidebar-toggle-button/index.js
@@ -0,0 +1,2 @@
+// @flow
+export { default } from './SidebarToggleButton';
diff --git a/src/elements/common/interactionTargets.js b/src/elements/common/interactionTargets.js
index 2fad7f7550..2d98892388 100644
--- a/src/elements/common/interactionTargets.js
+++ b/src/elements/common/interactionTargets.js
@@ -3,6 +3,7 @@ export const SIDEBAR_NAV_TARGETS = {
     DETAILS: 'sidebardetails',
     SKILLS: 'sidebarskills',
     METADATA: 'sidebarmetadata',
+    TOGGLE: 'sidebartoggle',
 };
 
 export const SECTION_TARGETS = {
diff --git a/src/elements/content-sidebar/SidebarNav.js b/src/elements/content-sidebar/SidebarNav.js
index 6cb65c0591..fde70971c0 100644
--- a/src/elements/content-sidebar/SidebarNav.js
+++ b/src/elements/content-sidebar/SidebarNav.js
@@ -10,6 +10,7 @@ import IconMagicWand from '../../icons/general/IconMagicWand';
 import IconMetadataThick from '../../icons/general/IconMetadataThick';
 import IconDocInfo from '../../icons/general/IconDocInfo';
 import IconChatRound from '../../icons/general/IconChatRound';
+import SidebarToggleButton from '../../components/sidebar-toggle-button';
 import messages from '../common/messages';
 import { SIDEBAR_NAV_TARGETS } from '../common/interactionTargets';
 import SidebarNavButton from './SidebarNavButton';
@@ -46,52 +47,70 @@ const SidebarNav = ({
     isOpen,
     onNavigate,
 }: Props) => (
-    <div aria-label={intl.formatMessage(messages.sidebarNavLabel)} role="tablist">
-        {hasActivity && (
-            <SidebarNavButton
-                interactionTarget={SIDEBAR_NAV_TARGETS.ACTIVITY}
+    <div className="bcs-SidebarNav" aria-label={intl.formatMessage(messages.sidebarNavLabel)} role="tablist">
+        <div className="bcs-SidebarNav-tabs">
+            {hasActivity && (
+                <SidebarNavButton
+                    data-resin-target={SIDEBAR_NAV_TARGETS.ACTIVITY}
+                    data-testid="sidebaractivity"
+                    isOpen={isOpen}
+                    sidebarView={SIDEBAR_VIEW_ACTIVITY}
+                    onNavigate={onNavigate}
+                    tooltip={<FormattedMessage {...messages.sidebarActivityTitle} />}
+                >
+                    <IconChatRound />
+                </SidebarNavButton>
+            )}
+            {hasDetails && (
+                <SidebarNavButton
+                    data-resin-target={SIDEBAR_NAV_TARGETS.DETAILS}
+                    data-testid="sidebardetails"
+                    isOpen={isOpen}
+                    sidebarView={SIDEBAR_VIEW_DETAILS}
+                    onNavigate={onNavigate}
+                    tooltip={<FormattedMessage {...messages.sidebarDetailsTitle} />}
+                >
+                    <IconDocInfo />
+                </SidebarNavButton>
+            )}
+            {hasSkills && (
+                <SidebarNavButton
+                    data-resin-target={SIDEBAR_NAV_TARGETS.SKILLS}
+                    data-testid="sidebarskills"
+                    isOpen={isOpen}
+                    sidebarView={SIDEBAR_VIEW_SKILLS}
+                    onNavigate={onNavigate}
+                    tooltip={<FormattedMessage {...messages.sidebarSkillsTitle} />}
+                >
+                    <IconMagicWand />
+                </SidebarNavButton>
+            )}
+            {hasMetadata && (
+                <SidebarNavButton
+                    data-resin-target={SIDEBAR_NAV_TARGETS.METADATA}
+                    data-testid="sidebarmetadata"
+                    isOpen={isOpen}
+                    sidebarView={SIDEBAR_VIEW_METADATA}
+                    onNavigate={onNavigate}
+                    tooltip={<FormattedMessage {...messages.sidebarMetadataTitle} />}
+                >
+                    <IconMetadataThick />
+                </SidebarNavButton>
+            )}
+            {hasAdditionalTabs && <AdditionalTabs key={fileId} tabs={additionalTabs} />}
+        </div>
+        <div className="bcs-SidebarNav-footer">
+            <SidebarToggleButton
+                data-resin-target={SIDEBAR_NAV_TARGETS.TOGGLE}
+                data-testid="sidebartoggle"
                 isOpen={isOpen}
-                sidebarView={SIDEBAR_VIEW_ACTIVITY}
-                onNavigate={onNavigate}
-                tooltip={<FormattedMessage {...messages.sidebarActivityTitle} />}
-            >
-                <IconChatRound />
-            </SidebarNavButton>
-        )}
-        {hasDetails && (
-            <SidebarNavButton
-                interactionTarget={SIDEBAR_NAV_TARGETS.DETAILS}
-                isOpen={isOpen}
-                sidebarView={SIDEBAR_VIEW_DETAILS}
-                onNavigate={onNavigate}
-                tooltip={<FormattedMessage {...messages.sidebarDetailsTitle} />}
-            >
-                <IconDocInfo />
-            </SidebarNavButton>
-        )}
-        {hasSkills && (
-            <SidebarNavButton
-                interactionTarget={SIDEBAR_NAV_TARGETS.SKILLS}
-                isOpen={isOpen}
-                sidebarView={SIDEBAR_VIEW_SKILLS}
-                onNavigate={onNavigate}
-                tooltip={<FormattedMessage {...messages.sidebarSkillsTitle} />}
-            >
-                <IconMagicWand />
-            </SidebarNavButton>
-        )}
-        {hasMetadata && (
-            <SidebarNavButton
-                interactionTarget={SIDEBAR_NAV_TARGETS.METADATA}
-                isOpen={isOpen}
-                sidebarView={SIDEBAR_VIEW_METADATA}
-                onNavigate={onNavigate}
-                tooltip={<FormattedMessage {...messages.sidebarMetadataTitle} />}
-            >
-                <IconMetadataThick />
-            </SidebarNavButton>
-        )}
-        {hasAdditionalTabs && <AdditionalTabs key={fileId} tabs={additionalTabs} />}
+                onClick={event => {
+                    if (onNavigate) {
+                        onNavigate(event, { isToggle: true });
+                    }
+                }}
+            />
+        </div>
     </div>
 );
 
diff --git a/src/elements/content-sidebar/SidebarNav.scss b/src/elements/content-sidebar/SidebarNav.scss
index 649e7d238c..f4d5591f52 100644
--- a/src/elements/content-sidebar/SidebarNav.scss
+++ b/src/elements/content-sidebar/SidebarNav.scss
@@ -1,7 +1,24 @@
 @import '../common/variables';
 
 .bcs {
-    nav {
+    .bcs-SidebarNav {
         border-left: 1px solid $off-white;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+    }
+
+    .bcs-SidebarNav-footer {
+        align-items: center;
+        display: flex;
+        height: 60px;
+        justify-content: center;
+
+        // Need to add these overriding styles because there is a specificity issue with .btn-plain
+        .btn-plain.bdl-SidebarToggleButton {
+            height: 24px;
+            margin: 0 3px;
+            padding: 4px;
+        }
     }
 }
diff --git a/src/elements/content-sidebar/SidebarNavButton.js b/src/elements/content-sidebar/SidebarNavButton.js
index 4449e2bc17..9eb26ef8a9 100644
--- a/src/elements/content-sidebar/SidebarNavButton.js
+++ b/src/elements/content-sidebar/SidebarNavButton.js
@@ -11,15 +11,24 @@ import Tooltip from '../../components/tooltip/Tooltip';
 import './SidebarNavButton.scss';
 
 type Props = {
+    'data-resin-target'?: string,
+    'data-testid'?: string,
     children: React.Node,
-    interactionTarget: string,
     isOpen?: boolean,
     onNavigate?: (SyntheticEvent<>, NavigateOptions) => void,
     sidebarView: string,
     tooltip: React.Node,
 };
 
-const SidebarNavButton = ({ children, interactionTarget, isOpen, onNavigate, sidebarView, tooltip }: Props) => {
+const SidebarNavButton = ({
+    children,
+    'data-resin-target': dataResinTarget,
+    'data-testid': dataTestId,
+    isOpen,
+    onNavigate,
+    sidebarView,
+    tooltip,
+}: Props) => {
     const sidebarPath = `/${sidebarView}`;
 
     return (
@@ -35,8 +44,8 @@ const SidebarNavButton = ({ children, interactionTarget, isOpen, onNavigate, sid
                             aria-selected={isActive()}
                             activeClassName="bcs-is-selected"
                             className="bcs-NavButton"
-                            data-resin-target={interactionTarget}
-                            data-testid={interactionTarget}
+                            data-resin-target={dataResinTarget}
+                            data-testid={dataTestId}
                             isActive={isActive}
                             onClick={event => {
                                 if (onNavigate) {
diff --git a/src/elements/content-sidebar/__tests__/__snapshots__/SidebarNav-test.js.snap b/src/elements/content-sidebar/__tests__/__snapshots__/SidebarNav-test.js.snap
index be5f07593c..f24ec1c5fd 100644
--- a/src/elements/content-sidebar/__tests__/__snapshots__/SidebarNav-test.js.snap
+++ b/src/elements/content-sidebar/__tests__/__snapshots__/SidebarNav-test.js.snap
@@ -13,119 +13,230 @@ exports[`elements/content-sidebar/SidebarNav should render the additional tabs l
 >
   <div
     aria-label="Sidebar"
+    className="bcs-SidebarNav"
     role="tablist"
   >
-    <AdditionalTabs
-      tabs={Array []}
+    <div
+      className="bcs-SidebarNav-tabs"
     >
-      <div
-        className="bdl-AdditionalTabs"
+      <AdditionalTabs
+        tabs={Array []}
       >
-        <AdditionalTabsLoading>
-          <AdditionalTabPlaceholder
-            isLoading={true}
-            key="0"
-          >
-            <div
-              className="bdl-AdditionalTabPlaceholder"
-              data-testid="additionaltabplaceholder"
+        <div
+          className="bdl-AdditionalTabs"
+        >
+          <AdditionalTabsLoading>
+            <AdditionalTabPlaceholder
+              isLoading={true}
+              key="0"
             >
               <div
-                className="bdl-AdditionalTabPlaceholder-icon bdl-AdditionalTabPlaceholder-icon--loading"
-              />
-            </div>
-          </AdditionalTabPlaceholder>
-          <AdditionalTabPlaceholder
-            isLoading={true}
-            key="1"
-          >
-            <div
-              className="bdl-AdditionalTabPlaceholder"
-              data-testid="additionaltabplaceholder"
+                className="bdl-AdditionalTabPlaceholder"
+                data-testid="additionaltabplaceholder"
+              >
+                <div
+                  className="bdl-AdditionalTabPlaceholder-icon bdl-AdditionalTabPlaceholder-icon--loading"
+                />
+              </div>
+            </AdditionalTabPlaceholder>
+            <AdditionalTabPlaceholder
+              isLoading={true}
+              key="1"
             >
               <div
-                className="bdl-AdditionalTabPlaceholder-icon bdl-AdditionalTabPlaceholder-icon--loading"
-              />
-            </div>
-          </AdditionalTabPlaceholder>
-          <AdditionalTabPlaceholder
-            isLoading={true}
-            key="2"
-          >
-            <div
-              className="bdl-AdditionalTabPlaceholder"
-              data-testid="additionaltabplaceholder"
+                className="bdl-AdditionalTabPlaceholder"
+                data-testid="additionaltabplaceholder"
+              >
+                <div
+                  className="bdl-AdditionalTabPlaceholder-icon bdl-AdditionalTabPlaceholder-icon--loading"
+                />
+              </div>
+            </AdditionalTabPlaceholder>
+            <AdditionalTabPlaceholder
+              isLoading={true}
+              key="2"
             >
               <div
-                className="bdl-AdditionalTabPlaceholder-icon bdl-AdditionalTabPlaceholder-icon--loading"
-              />
-            </div>
-          </AdditionalTabPlaceholder>
-          <AdditionalTabPlaceholder
-            isLoading={true}
-            key="3"
-          >
-            <div
-              className="bdl-AdditionalTabPlaceholder"
-              data-testid="additionaltabplaceholder"
+                className="bdl-AdditionalTabPlaceholder"
+                data-testid="additionaltabplaceholder"
+              >
+                <div
+                  className="bdl-AdditionalTabPlaceholder-icon bdl-AdditionalTabPlaceholder-icon--loading"
+                />
+              </div>
+            </AdditionalTabPlaceholder>
+            <AdditionalTabPlaceholder
+              isLoading={true}
+              key="3"
             >
               <div
-                className="bdl-AdditionalTabPlaceholder-icon bdl-AdditionalTabPlaceholder-icon--loading"
-              />
-            </div>
-          </AdditionalTabPlaceholder>
-          <AdditionalTabPlaceholder
-            isLoading={true}
-            key="4"
-          >
-            <div
-              className="bdl-AdditionalTabPlaceholder"
-              data-testid="additionaltabplaceholder"
+                className="bdl-AdditionalTabPlaceholder"
+                data-testid="additionaltabplaceholder"
+              >
+                <div
+                  className="bdl-AdditionalTabPlaceholder-icon bdl-AdditionalTabPlaceholder-icon--loading"
+                />
+              </div>
+            </AdditionalTabPlaceholder>
+            <AdditionalTabPlaceholder
+              isLoading={true}
+              key="4"
             >
               <div
-                className="bdl-AdditionalTabPlaceholder-icon bdl-AdditionalTabPlaceholder-icon--loading"
-              />
-            </div>
-          </AdditionalTabPlaceholder>
-          <MoreTabPlaceholder
-            isLoading={true}
-            key="5"
-          >
-            <div
-              className="bdl-AdditionalTabPlaceholder"
+                className="bdl-AdditionalTabPlaceholder"
+                data-testid="additionaltabplaceholder"
+              >
+                <div
+                  className="bdl-AdditionalTabPlaceholder-icon bdl-AdditionalTabPlaceholder-icon--loading"
+                />
+              </div>
+            </AdditionalTabPlaceholder>
+            <MoreTabPlaceholder
+              isLoading={true}
+              key="5"
             >
-              <IconEllipsis
-                className="bdl-AdditionalTabPlaceholder-moreIcon"
-                color="#eee"
+              <div
+                className="bdl-AdditionalTabPlaceholder"
               >
-                <AccessibleSVG
-                  className="icon-ellipsis bdl-AdditionalTabPlaceholder-moreIcon"
-                  height={20}
-                  viewBox="0 0 10 2"
-                  width={20}
+                <IconEllipsis
+                  className="bdl-AdditionalTabPlaceholder-moreIcon"
+                  color="#eee"
                 >
-                  <svg
+                  <AccessibleSVG
                     className="icon-ellipsis bdl-AdditionalTabPlaceholder-moreIcon"
-                    focusable="false"
                     height={20}
-                    role="presentation"
                     viewBox="0 0 10 2"
                     width={20}
                   >
-                    <path
-                      className="fill-color"
-                      d="M1 2c.6 0 1-.4 1-1s-.4-1-1-1-1 .4-1 1 .4 1 1 1zm8 0c.6 0 1-.4 1-1s-.4-1-1-1-1 .4-1 1 .4 1 1 1zM5 2c.6 0 1-.4 1-1s-.4-1-1-1-1 .4-1 1 .4 1 1 1z"
-                      fill="#eee"
-                      fillRule="evenodd"
-                    />
-                  </svg>
-                </AccessibleSVG>
-              </IconEllipsis>
-            </div>
-          </MoreTabPlaceholder>
-        </AdditionalTabsLoading>
-      </div>
-    </AdditionalTabs>
+                    <svg
+                      className="icon-ellipsis bdl-AdditionalTabPlaceholder-moreIcon"
+                      focusable="false"
+                      height={20}
+                      role="presentation"
+                      viewBox="0 0 10 2"
+                      width={20}
+                    >
+                      <path
+                        className="fill-color"
+                        d="M1 2c.6 0 1-.4 1-1s-.4-1-1-1-1 .4-1 1 .4 1 1 1zm8 0c.6 0 1-.4 1-1s-.4-1-1-1-1 .4-1 1 .4 1 1 1zM5 2c.6 0 1-.4 1-1s-.4-1-1-1-1 .4-1 1 .4 1 1 1z"
+                        fill="#eee"
+                        fillRule="evenodd"
+                      />
+                    </svg>
+                  </AccessibleSVG>
+                </IconEllipsis>
+              </div>
+            </MoreTabPlaceholder>
+          </AdditionalTabsLoading>
+        </div>
+      </AdditionalTabs>
+    </div>
+    <div
+      className="bcs-SidebarNav-footer"
+    >
+      <SidebarToggleButton
+        data-resin-target="sidebartoggle"
+        data-testid="sidebartoggle"
+        onClick={[Function]}
+      >
+        <SidebarToggleButton
+          data-resin-target="sidebartoggle"
+          data-testid="sidebartoggle"
+          intl={
+            Object {
+              "formatDate": [Function],
+              "formatMessage": [Function],
+            }
+          }
+          onClick={[Function]}
+        >
+          <Tooltip
+            constrainToScrollParent={false}
+            constrainToWindow={true}
+            isDisabled={false}
+            position="middle-left"
+            text="Show Sidebar"
+            theme="default"
+          >
+            <TetherComponent
+              attachment="middle right"
+              bodyElement={<body />}
+              classPrefix="tooltip"
+              constraints={
+                Array [
+                  Object {
+                    "attachment": "together",
+                    "to": "window",
+                  },
+                ]
+              }
+              enabled={false}
+              renderElementTag="div"
+              renderElementTo={null}
+              targetAttachment="middle left"
+            >
+              <PlainButton
+                aria-label="Show Sidebar"
+                className="bdl-SidebarToggleButton bdl-is-collapsed"
+                data-resin-target="sidebartoggle"
+                data-testid="sidebartoggle"
+                key=".0"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onKeyDown={[Function]}
+                onMouseEnter={[Function]}
+                onMouseLeave={[Function]}
+                tabIndex="0"
+                type="button"
+              >
+                <button
+                  aria-label="Show Sidebar"
+                  className="btn-plain bdl-SidebarToggleButton bdl-is-collapsed"
+                  data-resin-target="sidebartoggle"
+                  data-testid="sidebartoggle"
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onKeyDown={[Function]}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  tabIndex="0"
+                  type="button"
+                >
+                  <IconShow
+                    height={16}
+                    width={16}
+                  >
+                    <AccessibleSVG
+                      className="icon-show "
+                      height={16}
+                      viewBox="0 0 16 16"
+                      width={16}
+                    >
+                      <svg
+                        className="icon-show "
+                        focusable="false"
+                        height={16}
+                        role="presentation"
+                        viewBox="0 0 16 16"
+                        width={16}
+                      >
+                        <path
+                          d="M7.354 7.646l3.292-3.292a.5.5 0 0 0 0-.708L9.354 2.354a.5.5 0 0 0-.708 0L3.354 7.646a.5.5 0 0 0 0 .708l5.292 5.292a.5.5 0 0 0 .708 0l1.292-1.292a.5.5 0 0 0 0-.708L7.354 8.354a.5.5 0 0 1 0-.708z"
+                          fill="#909090"
+                          fillRule="nonzero"
+                        />
+                      </svg>
+                    </AccessibleSVG>
+                  </IconShow>
+                </button>
+              </PlainButton>
+            </TetherComponent>
+          </Tooltip>
+        </SidebarToggleButton>
+      </SidebarToggleButton>
+    </div>
   </div>
 </SidebarNav>
 `;
diff --git a/test/integration/content-sidebar/ContentSidebar.e2e.test.js b/test/integration/content-sidebar/ContentSidebar.e2e.test.js
index 5114972c64..c5a56b881d 100644
--- a/test/integration/content-sidebar/ContentSidebar.e2e.test.js
+++ b/test/integration/content-sidebar/ContentSidebar.e2e.test.js
@@ -42,6 +42,32 @@ describe('ContentSidebar', () => {
             cy.getByTestId('sidebaractivity').should('have.class', 'bcs-is-selected');
             cy.getByTestId('sidebarskills').should('not.have.class', 'bcs-is-selected');
         });
+
+        it('should toggle sidebar content when a user clicks the toggle sidebar button', () => {
+            cy.getByTestId('bcs-content').should('exist');
+            cy.getByTestId('sidebarskills').should('have.class', 'bcs-is-selected');
+
+            cy.getByTestId('sidebartoggle').click();
+            cy.getByTestId('sidebarskills').should('not.have.class', 'bcs-is-selected');
+            cy.getByTestId('bcs-content').should('not.exist');
+
+            cy.getByTestId('sidebartoggle').click();
+            cy.getByTestId('sidebarskills').should('have.class', 'bcs-is-selected');
+            cy.getByTestId('bcs-content').should('exist');
+        });
+
+        it('should toggle sidebar content when using a combination of toggle sidebar button and sidebar tab', () => {
+            cy.getByTestId('bcs-content').should('exist');
+            cy.getByTestId('sidebarskills').should('have.class', 'bcs-is-selected');
+
+            cy.getByTestId('sidebartoggle').click();
+            cy.getByTestId('sidebarskills').should('not.have.class', 'bcs-is-selected');
+            cy.getByTestId('bcs-content').should('not.exist');
+
+            cy.getByTestId('sidebaractivity').click();
+            cy.getByTestId('sidebaractivity').should('have.class', 'bcs-is-selected');
+            cy.getByTestId('sidebarskills').should('not.have.class', 'bcs-is-selected');
+        });
     });
 
     describe('version history', () => {