diff --git a/src/app/core/side-panel/side-panel.service.ts b/src/app/core/side-panel/side-panel.service.ts
index 6857f7d..385f534 100644
--- a/src/app/core/side-panel/side-panel.service.ts
+++ b/src/app/core/side-panel/side-panel.service.ts
@@ -14,6 +14,7 @@
   public sidePanelElClass = '.xos-side-panel';
   public sidePanelEl: JQuery;
   private hasComponentLoaded: boolean;
+  private componentToggle = false;
 
   constructor (
     private $rootScope: ng.IRootScopeService,
@@ -52,4 +53,15 @@
       this.hasComponentLoaded = false;
     }, 500);
   }
+
+  public toggleComponent(componentName: string, attributes?: any, transclude?: string) {
+    this.componentToggle = !this.componentToggle;
+    if (this.componentToggle) {
+      this.XosComponentInjector.injectComponent('#side-panel-container', componentName, attributes, transclude, true);
+      this.open();
+    }
+    else {
+      this.removeInjectedComponents();
+    }
+  }
 }