diff --git a/ignite-html-tabs.js b/ignite-html-tabs.js
index 22e1348..f499df0 100644
--- a/ignite-html-tabs.js
+++ b/ignite-html-tabs.js
@@ -6,9 +6,11 @@ import { IgniteTemplate, slot, div, html } from "../ignite-html/ignite-template.
  * @param {String} name The name of the tab.
  * @param {String} group The tab group to put this tab under, by default this is null.
  * @param {Boolean} active Whether or not this tab is active by default.
+ * @param {Function} showCallback Called when this tab is changed to the shown state.
+ * @param {Function} hideCallback Called when this tab is changed to hidden state.
  * @returns {IgniteTemplate} Returns this ignite template.
  */
- IgniteTemplate.prototype.tab = function(name, group = null, active = false) {
+ IgniteTemplate.prototype.tab = function(name, group = null, active = false, showCallback = null, hideCallback = null) {
     //Add the tab class to this element.
     this.class("tab")
 
@@ -26,9 +28,19 @@ import { IgniteTemplate, slot, div, html } from "../ignite-html/ignite-template.
             if (event.name == name && event.group == group) {
                 if (!this.element.classList.contains("active")) {
                     this.element.classList.add("active");
+
+                    //Invoke the show callback if there is one.
+                    if (showCallback) {
+                        showCallback();
+                    }
                 }
             } else if (event.group == group) {
                 this.element.classList.remove("active");
+
+                //Invoke the hide callback if there is one.
+                if (hideCallback) {
+                    hideCallback();
+                }
             }
         }
     }, () => {