diff --git a/config/jsdoc/api/template/static/scripts/main.js b/config/jsdoc/api/template/static/scripts/main.js
index 84f6ffb542..b6130981f9 100644
--- a/config/jsdoc/api/template/static/scripts/main.js
+++ b/config/jsdoc/api/template/static/scripts/main.js
@@ -57,8 +57,8 @@ $(function () {
     var unstable = $('.unstable');
     var stabilityToggle = $('#stability-toggle');
     stabilityToggle.change(function() {
-        unstable.toggle(!this.checked);
+        unstable[this.checked ? 'addClass' : 'removeClass']('hidden');
         return false;
     });
-    unstable.toggle(!stabilityToggle[0].checked);
+    unstable[stabilityToggle[0].checked ? 'addClass' : 'removeClass']('hidden');
 });
diff --git a/config/jsdoc/api/template/static/styles/jaguar.css b/config/jsdoc/api/template/static/styles/jaguar.css
index c3f55f84b7..b44fadeff4 100644
--- a/config/jsdoc/api/template/static/styles/jaguar.css
+++ b/config/jsdoc/api/template/static/styles/jaguar.css
@@ -372,7 +372,7 @@ footer {
 .main .readme table ul li {
   margin-bottom: 0;
 }
-.unstable {
+.hidden {
   display: none;
 }
 #stability {
diff --git a/config/jsdoc/api/template/tmpl/navigation.tmpl b/config/jsdoc/api/template/tmpl/navigation.tmpl
index bf2a26bf5e..7a41bfed9b 100644
--- a/config/jsdoc/api/template/tmpl/navigation.tmpl
+++ b/config/jsdoc/api/template/tmpl/navigation.tmpl
@@ -73,7 +73,7 @@ var self = this;
                 item.fires.forEach(function (v) {
                     v = self.find({longname: v})[0] || {longname: v, name: v.split(/#?event:/)[1]};
             ?>
-                <li data-name="<?js= v.longname ?>">
+                <li data-name="<?js= v.longname ?>" class="<?js= (v.stability != 'stable' ? 'unstable' : '') ?>">
                     <?js= self.linkto(v.longname, v.name) ?>
                 </li>
             <?js