diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js
index f7efb425..f6f10ec6 100644
--- a/src/components/structures/RoomSubList.js
+++ b/src/components/structures/RoomSubList.js
@@ -64,7 +64,9 @@ var RoomSubList = React.createClass({
         bottommost: React.PropTypes.bool,
         selectedRoom: React.PropTypes.string.isRequired,
         activityMap: React.PropTypes.object.isRequired,
-        collapsed: React.PropTypes.bool.isRequired
+        collapsed: React.PropTypes.bool.isRequired,
+        onHeaderClick: React.PropTypes.func,
+        alwaysShowHeader: React.PropTypes.bool
     },
 
     getInitialState: function() {
@@ -74,6 +76,12 @@ var RoomSubList = React.createClass({
         };
     },
 
+    getDefaultProps: function() {
+        return {
+            onHeaderClick: function() {} // NOP
+        };
+    },
+
     componentWillMount: function() {
         this.sortList(this.props.list, this.props.order);
     },
@@ -85,7 +93,9 @@ var RoomSubList = React.createClass({
     },
 
     onClick: function(ev) {
-        this.setState({ hidden : !this.state.hidden });
+        var isHidden = !this.state.hidden;
+        this.setState({ hidden : isHidden });
+        this.props.onHeaderClick(isHidden);
     },
 
     tsOfNewestEvent: function(room) {
@@ -244,6 +254,17 @@ var RoomSubList = React.createClass({
         });
     },
 
+    _getHeaderJsx: function() {
+        return (
+            <h2 onClick={ this.onClick } className="mx_RoomSubList_label">
+                { this.props.collapsed ? '' : this.props.label }
+                <img className="mx_RoomSubList_chevron"
+                    src={ this.state.hidden ? "img/list-open.svg" : "img/list-close.svg" }
+                    width="10" height="10" />
+            </h2>
+        );
+    },
+
     render: function() {
         var connectDropTarget = this.props.connectDropTarget;
         var RoomDropTarget = sdk.getComponent('rooms.RoomDropTarget');
@@ -275,9 +296,7 @@ var RoomSubList = React.createClass({
 
             return connectDropTarget(
                 <div>
-                    <h2 onClick={ this.onClick } className="mx_RoomSubList_label">{ this.props.collapsed ? '' : this.props.label }
-                        <img className="mx_RoomSubList_chevron" src={ this.state.hidden ? "img/list-open.svg" : "img/list-close.svg" } width="10" height="10"/>
-                    </h2>
+                    { this._getHeaderJsx() }
                     { subList }
                 </div>
             );
@@ -285,6 +304,7 @@ var RoomSubList = React.createClass({
         else {
             return (
                 <div className="mx_RoomSubList">
+                    { this.props.alwaysShowHeader ? this._getHeaderJsx() : undefined }
                 </div>
             );
         }