add the ability to hide/show a panel by the panel's visible property

src/panels/view/PanelView.js

@@ -13,6 +13,7 @@ module.exports = Backbone.View.extend({
     this.id = this.pfx + model.get('id');
     this.listenTo(model, 'change:appendContent', this.appendContent);
     this.listenTo(model, 'change:content', this.updateContent);
+    this.listenTo(model, 'change:visible', this.toggleVisible);
     model.view = this;
   },
 
@@ -30,6 +31,14 @@ module.exports = Backbone.View.extend({
     this.$el.html(this.model.get('content'));
   },
 
+  toggleVisible() {
+    if (!this.model.get('visible')) {
+      this.$el.addClass(`${this.ppfx}hidden`);
+      return;
+    }
+    this.$el.removeClass(`${this.ppfx}hidden`);
+  },
+
   attributes() {
     return this.model.get('attributes');
   },

test/specs/panels/view/PanelView.js

@@ -39,6 +39,19 @@ module.exports = {
         expect(view.$el.html()).toEqual('test2');
       });
 
+      test('Hide panel', () => {
+        expect(view.$el.hasClass('hidden')).toBeFalsy();
+        model.set('visible', false);
+        expect(view.$el.hasClass('hidden')).toBeTruthy();
+      });
+
+      test('Show panel', () => {
+        model.set('visible', false);
+        expect(view.$el.hasClass('hidden')).toBeTruthy();
+        model.set('visible', true);
+        expect(view.$el.hasClass('hidden')).toBeFalsy();
+      });
+
       describe('Init with options', () => {
         beforeEach(() => {
           model = new Panel({