diff --git a/build/js/ControlSidebar.js b/build/js/ControlSidebar.js
index 686253c73..0e4218da6 100644
--- a/build/js/ControlSidebar.js
+++ b/build/js/ControlSidebar.js
@@ -18,7 +18,8 @@ const ControlSidebar = (($) => {
   const DATA_API_KEY       = '.data-api'
 
   const Event = {
-    CLICK_DATA_API: `click${EVENT_KEY}${DATA_API_KEY}`
+    COLLAPSED: `collapsed${EVENT_KEY}`,
+    EXPANDED: `expanded${EVENT_KEY}`
   }
 
   const Selector = {
@@ -62,6 +63,9 @@ const ControlSidebar = (($) => {
       } else {
         $('body').removeClass(ClassName.CONTROL_SIDEBAR_OPEN)
       }
+
+      const expandedEvent = $.Event(Event.EXPANDED)
+      $(this._element).trigger(expandedEvent)
     }
 
     collapse() {
@@ -78,6 +82,9 @@ const ControlSidebar = (($) => {
       } else {
         $('body').addClass(ClassName.CONTROL_SIDEBAR_OPEN)
       }
+
+      const collapsedEvent = $.Event(Event.COLLAPSED)
+      $(this._element).trigger(collapsedEvent)
     }
 
     toggle() {
diff --git a/docs/javascript/control-sidebar.md b/docs/javascript/control-sidebar.md
index 3e1517025..286497cfe 100644
--- a/docs/javascript/control-sidebar.md
+++ b/docs/javascript/control-sidebar.md
@@ -54,7 +54,8 @@ $("#my-toggle-button").ControlSidebar('toggle');
 |---
 | Event Type | Description
 |-|-
-|  | 
+|expanded.lte.control.sidebar | Triggered after a control sidebar expands.
+|collapsed.lte.control.sidebar | Triggered after a control sidebar collapses.
 {: .table .table-bordered .bg-light}
 
-Example: `$('#toggle-button').on('shown.lte.control.sidebar', handleExpandedEvent)`
+Example: `$('#toggle-button').on('expanded.lte.control.sidebar', handleExpandedEvent)`