diff --git a/Leaflet.Dialog.css b/Leaflet.Dialog.css
index 168d7c0..1c3eef5 100644
--- a/Leaflet.Dialog.css
+++ b/Leaflet.Dialog.css
@@ -13,7 +13,7 @@
   float: left;
   width: 100%;
   height: 100%;
-  padding: 20px 0px;
+  padding: 30px 0px 20px 0px;
 }
 
 .leaflet-control-dialog
@@ -23,8 +23,8 @@
   box-sizing: border-box;
   width: 20px;
   height: 20px;
-  top: 0px;
-  left: 0px;
+  top: 3px;
+  left: 2px;
   padding: 3px;
   font-size: 15px;
   line-height: 15px;
@@ -46,8 +46,8 @@
   box-sizing: border-box;
   width: 20px;
   height: 20px;
-  top: 0px;
-  right: 0px;
+  top: 3px;
+  right: 2px;
   padding: 2px;
   font-size: 16px;
   line-height: 16px;
@@ -60,6 +60,27 @@
   cursor: pointer;
 }
 
+.leaflet-control-dialog
+  .leaflet-control-dialog-inner
+  .leaflet-control-dialog-collapse {
+  position: absolute;
+  box-sizing: border-box;
+  width: 20px;
+  height: 20px;
+  top: 3px;
+  right: 22px;
+  padding: 2px;
+  font-size: 16px;
+  line-height: 16px;
+  color: #666;
+}
+
+.leaflet-control-dialog
+  .leaflet-control-dialog-inner
+  .leaflet-control-dialog-collapse:hover {
+  cursor: pointer;
+}
+
 .leaflet-control-dialog
   .leaflet-control-dialog-inner
   .leaflet-control-dialog-contents {
@@ -92,6 +113,29 @@
 .leaflet-control-dialog
   .leaflet-control-dialog-inner
   .leaflet-control-dialog-resizer:hover {
+  cursor: se-resize;
+  cursor: -webkit-se-resize;
+  cursor: -moz-se-resize;
+}
+
+.leaflet-control-dialog
+  .leaflet-control-dialog-inner
+  .leaflet-control-dialog-grabber-title {
+  position: absolute;
+  box-sizing: border-box;
+  width: 100%;
+  height: 30px;
+  top: 0px;
+  left: 0px;
+  padding: 6px;
+  font-size: 15px;
+  line-height: 18px;
+  color: #666;
+}
+
+.leaflet-control-dialog
+  .leaflet-control-dialog-inner
+  .leaflet-control-dialog-grabber-title:hover {
   cursor: grab;
   cursor: -webkit-grab;
   cursor: -moz-grab;
@@ -104,3 +148,8 @@
   -o-transform: rotate(45deg);
   transform: rotate(45deg);
 }
+
+.leaflet-control-dialog.dialog-hidden
+	.leaflet-control-dialog-contents {
+	display: none;
+}
\ No newline at end of file
diff --git a/Leaflet.Dialog.js b/Leaflet.Dialog.js
index d31ad17..e41a95b 100644
--- a/Leaflet.Dialog.js
+++ b/Leaflet.Dialog.js
@@ -5,7 +5,15 @@ L.Control.Dialog = L.Control.extend({
     maxSize: [ 350, 350 ],
     anchor: [ 250, 250 ],
     position: "topleft",
-    initOpen: true
+    initOpen: true,
+	title: null,
+	iconClass: {
+		grabber: "fa fa-arrows",
+		close: "fa fa-times",
+		resize: "fa fa-arrows-h fa-rotate-45",
+		collapse: "fa caret-down",
+		expand: "fa caret-up",
+	}
   },
 
   initialize: function(options) {
@@ -13,6 +21,7 @@ L.Control.Dialog = L.Control.extend({
     L.setOptions(this, options);
 
     this._attributions = {};
+    this._collapsed = false;
   },
 
   onAdd: function(map) {
@@ -201,12 +210,20 @@ L.Control.Dialog = L.Control.extend({
       className + "-inner"
     ));
 
-    var grabberNode = (this._grabberNode = L.DomUtil.create(
-      "div",
-      className + "-grabber"
-    ));
-    var grabberIcon = L.DomUtil.create("i", "fa fa-arrows");
-    grabberNode.appendChild(grabberIcon);
+    if (this.options.title) {
+        var grabberNode = (this._resizerNode = L.DomUtil.create(
+          "div",
+          className + "-grabber-title"
+        ));
+        grabberNode.innerHTML = this.options.title;
+    } else {
+        grabberNode = (this._grabberNode = L.DomUtil.create(
+          "div",
+          className + "-grabber"
+        ));
+        var grabberIcon = L.DomUtil.create("i", this.options.iconClass.grabber);
+        grabberNode.appendChild(grabberIcon);
+    }
 
     L.DomEvent.on(grabberNode, "mousedown", this._handleMoveStart, this);
 
@@ -214,16 +231,26 @@ L.Control.Dialog = L.Control.extend({
       "div",
       className + "-close"
     ));
-    var closeIcon = L.DomUtil.create("i", "fa fa-times");
+    var closeIcon = L.DomUtil.create("i", this.options.iconClass.close);
     closeNode.appendChild(closeIcon);
     L.DomEvent.on(closeNode, "click", this._handleClose, this);
+    
+    L.DomEvent.on(grabberNode, "mousedown", this._handleMoveStart, this);
+
+    var collapseNode = (this._collapse = L.DomUtil.create(
+      "div",
+      className + "-collapse"
+    ));
+    this._collapseIcon = L.DomUtil.create("i", this.options.iconClass.collapse);
+    collapseNode.appendChild(this._collapseIcon);
+    L.DomEvent.on(collapseNode, "click", this._handleCollapse, this);
 
     var resizerNode = (this._resizerNode = L.DomUtil.create(
       "div",
       className + "-resizer"
     ));
-    var resizeIcon = L.DomUtil.create("i", "fa fa-arrows-h fa-rotate-45");
-    resizerNode.appendChild(resizeIcon);
+    var resizeIcon = L.DomUtil.create("i", this.options.iconClass.resize);
+    resizerNode.appendChild(resizeIcon)
 
     L.DomEvent.on(resizerNode, "mousedown", this._handleResizeStart, this);
 
@@ -237,11 +264,43 @@ L.Control.Dialog = L.Control.extend({
     innerContainer.appendChild(contentNode);
     innerContainer.appendChild(grabberNode);
     innerContainer.appendChild(closeNode);
+    innerContainer.appendChild(collapseNode);
     innerContainer.appendChild(resizerNode);
 
     this._oldMousePos = { x: 0, y: 0 };
   },
 
+  _handleCollapse: function() {
+    this._collapsed = !this._collapsed;
+    if (this._collapsed) {
+        this._rmClasses(this._collapseIcon, this.options.iconClass.collapse);
+        this._addClasses(this._collapseIcon, this.options.iconClass.expand);
+		L.DomUtil.addClass(this._container, 'dialog-hidden');
+		this._container._h = this._container.style.height;
+		this._container.style.height = '30px';
+    } else {
+        this._rmClasses(this._collapseIcon, this.options.iconClass.expand);
+        this._addClasses(this._collapseIcon, this.options.iconClass.collapse);
+		L.DomUtil.removeClass(this._container, 'dialog-hidden');
+		this._container.style.height = this._container._h;
+    }
+    console.log("_handleCollapse", this._collapsed);
+  },
+  
+  _rmClasses: function(el, str) {
+    var arr = str.split(" ");
+    for (var k in arr) {
+        L.DomUtil.removeClass(el, arr[k]);
+    }
+  },
+  
+  _addClasses: function(el, str) {
+    var arr = str.split(" ");
+    for (var k in arr) {
+        L.DomUtil.addClass(el, arr[k]);
+    }
+  },
+
   _handleClose: function() {
     this.close();
   },
diff --git a/README.md b/README.md
index 340e051..d0e6f3d 100644
--- a/README.md
+++ b/README.md
@@ -61,6 +61,8 @@ dialog.setContent("<p>Here's some new content!</p>");
 | anchor | [Array][top, left] | [ 250, 250 ] | The starting point anchor location (from the upper left) in pixels.
 | position | [String] | 'topleft' | The leaflet control div to place the modal inside, as a starting reference point.
 | initOpen | [Boolean] | true | Whether or not to initialize in an open state.
+| title | [String] |null | Title bar HTML
+| iconClass | [Object] |`{grabber: "fa fa-arrows", close: "fa fa-times", resize: "fa fa-arrows-h fa-rotate-45", collapse: "fa caret-down", expand: "fa caret-up"}` | Classes to be used as icons for grabber, close, resize, expand/collapse
 
 ## Methods: