diff --git a/zephyr/jstemplates/subscription.html b/zephyr/jstemplates/subscription.html
index 0122df8ebf..d72a5b8af3 100644
--- a/zephyr/jstemplates/subscription.html
+++ b/zephyr/jstemplates/subscription.html
@@ -4,7 +4,7 @@
 <tr class="subscription_row" id="subscription_{{id}}">
   <td>
     <div class="subscription_table_elem subscription_header" data-toggle="collapse" data-target="#subscription_settings_{{id}}">
-      <span class="color_swatch {{^subscribed}}invisible{{/subscribed}}" style="background-color: {{color}}"></span>
+      <span class="color_swatch fade {{#subscribed}}in{{/subscribed}}" style="background-color: {{color}}"></span>
       <span class="subscription_name">{{name}}</span>
       <button class="btn sub_unsub_button {{^subscribed}}btn-primary{{/subscribed}}"
               type="button" name="subscription">
@@ -18,7 +18,7 @@
     </div>
 
     <div id="subscription_settings_{{id}}" class="collapse subscription_settings">
-      <div class="regular_subscription_settings {{^subscribed}}hide{{/subscribed}}">
+      <div class="regular_subscription_settings collapse {{#subscribed}}in{{/subscribed}}">
         <span class="sub_settings_title">Settings</span>
         <ul>
           <li><span class="sub_setting_control"><input class="colorpicker" type="text" value="{{color}}" /></span>
diff --git a/zephyr/static/js/subs.js b/zephyr/static/js/subs.js
index 23b6303df5..2034b39b08 100644
--- a/zephyr/static/js/subs.js
+++ b/zephyr/static/js/subs.js
@@ -154,8 +154,8 @@ function mark_subscribed(stream_name) {
 
         // Display the swatch and subscription settings
         var sub_row = settings.closest('.subscription_row');
-        sub_row.find(".color_swatch").removeClass("invisible");
-        sub_row.find(".regular_subscription_settings").show();
+        sub_row.find(".color_swatch").addClass('in');
+        sub_row.find(".regular_subscription_settings").collapse('show');
     } else {
         // Already subscribed
         return;
@@ -180,13 +180,13 @@ function mark_unsubscribed(stream_name) {
 
         // Hide the swatch and subscription settings
         var sub_row = settings.closest('.subscription_row');
-        sub_row.find(".color_swatch").addClass("invisible");
+        sub_row.find(".color_swatch").removeClass('in');
         if (sub.render_subscribers) {
             // TODO: having a completely empty settings div messes
             // with Bootstrap's collapser.  We currently just ensure
             // that it's not empty on the MIT realm, even though it
             // looks weird
-            sub_row.find(".regular_subscription_settings").hide();
+            sub_row.find(".regular_subscription_settings").collapse('hide');
         }
     } else {
         // Already unsubscribed
@@ -455,6 +455,13 @@ $(function () {
         });
     });
 
+    $("#subscriptions_table").on("show", ".regular_subscription_settings", function (e) {
+        // We want 'show' events that originate from
+        // 'regular_subscription_settings' divs not to trigger the
+        // handler for the entire subscription_settings div
+        e.stopPropagation();
+    });
+
     $("#subscriptions_table").on("show", ".subscription_settings", function (e) {
         var sub_row = $(e.target).closest('.subscription_row');
         var stream = sub_row.find('.subscription_name').text();