diff --git a/superset/assets/javascripts/explore/components/ControlPanelSection.jsx b/superset/assets/javascripts/explore/components/ControlPanelSection.jsx
index c6d12cbb6d1..c3fa9ddb799 100644
--- a/superset/assets/javascripts/explore/components/ControlPanelSection.jsx
+++ b/superset/assets/javascripts/explore/components/ControlPanelSection.jsx
@@ -6,25 +6,38 @@ import InfoTooltipWithTrigger from '../../components/InfoTooltipWithTrigger';
 const propTypes = {
   label: PropTypes.string,
   description: PropTypes.string,
-  tooltip: PropTypes.string,
   children: PropTypes.node.isRequired,
+  startExpanded: PropTypes.bool,
 };
 
 const defaultProps = {
   label: null,
   description: null,
-  tooltip: null,
+  startExpanded: false,
 };
 
 export default class ControlPanelSection extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { expanded: this.props.startExpanded };
+  }
+  toggleExpand() {
+    this.setState({ expanded: !this.state.expanded });
+  }
   renderHeader() {
-    const { label, tooltip } = this.props;
+    const { label, description } = this.props;
     let header;
     if (label) {
       header = (
         <div>
-          {label} &nbsp;
-          {tooltip && <InfoTooltipWithTrigger label={label} tooltip={tooltip} />}
+          <i
+            className={`text-primary expander fa fa-caret-${this.state.expanded ? 'down' : 'right'}`}
+            onClick={this.toggleExpand.bind(this)}
+          />
+          {' '}
+          <span onClick={this.toggleExpand.bind(this)}>{label}</span>
+          {' '}
+          {description && <InfoTooltipWithTrigger label={label} tooltip={description} />}
         </div>
       );
     }
@@ -35,6 +48,8 @@ export default class ControlPanelSection extends React.Component {
     return (
       <Panel
         className="control-panel-section"
+        collapsible
+        expanded={this.state.expanded}
         header={this.renderHeader()}
       >
         {this.props.children}
diff --git a/superset/assets/javascripts/explore/components/ControlPanelsContainer.jsx b/superset/assets/javascripts/explore/components/ControlPanelsContainer.jsx
index 8a8c2d8802b..d9e9d6c3145 100644
--- a/superset/assets/javascripts/explore/components/ControlPanelsContainer.jsx
+++ b/superset/assets/javascripts/explore/components/ControlPanelsContainer.jsx
@@ -67,11 +67,13 @@ class ControlPanelsContainer extends React.Component {
             <ControlPanelSection
               key={section.label}
               label={section.label}
-              tooltip={section.description}
+              startExpanded={section.expanded}
+              description={section.description}
             >
               {section.controlSetRows.map((controlSets, i) => (
                 <ControlRow
                   key={`controlsetrow-${i}`}
+                  className="control-row"
                   controls={controlSets.map(controlName => (
                     controlName &&
                     this.props.controls[controlName] &&
diff --git a/superset/assets/javascripts/explore/main.css b/superset/assets/javascripts/explore/main.css
index 5baea683d19..6d1a7bd48b9 100644
--- a/superset/assets/javascripts/explore/main.css
+++ b/superset/assets/javascripts/explore/main.css
@@ -73,3 +73,16 @@
   height: 10px;
   margin: 9px 1px;
 }
+.control-panel-section .panel-body {
+  margin-left: 15px;
+  padding-bottom: 0px;
+}
+.control-panel-section .control-label {
+  margin-bottom: 0px;
+}
+.fa.expander {
+  width: 15px;
+}
+.control-panel-section span.label {
+  display: inline-block;
+}
diff --git a/superset/assets/javascripts/explore/stores/visTypes.js b/superset/assets/javascripts/explore/stores/visTypes.js
index e59e870ce90..b8b94b55f50 100644
--- a/superset/assets/javascripts/explore/stores/visTypes.js
+++ b/superset/assets/javascripts/explore/stores/visTypes.js
@@ -4,6 +4,7 @@ import * as v from '../validators';
 export const sections = {
   druidTimeSeries: {
     label: 'Time',
+    expanded: true,
     description: 'Time related form attributes',
     controlSetRows: [
       ['granularity', 'druid_time_origin'],
@@ -12,6 +13,7 @@ export const sections = {
   },
   datasourceAndVizType: {
     label: 'Datasource & Chart Type',
+    expanded: true,
     controlSetRows: [
       ['datasource'],
       ['viz_type'],
@@ -27,6 +29,7 @@ export const sections = {
   sqlaTimeSeries: {
     label: 'Time',
     description: 'Time related form attributes',
+    expanded: true,
     controlSetRows: [
       ['granularity_sqla', 'time_grain_sqla'],
       ['since', 'until'],
@@ -42,7 +45,8 @@ export const sections = {
   },
   NVD3TimeSeries: [
     {
-      label: null,
+      label: 'Query',
+      expanded: true,
       controlSetRows: [
         ['metrics'],
         ['groupby'],
@@ -66,14 +70,12 @@ export const sections = {
   filters: [
     {
       label: 'Filters',
-      description: 'Filters are defined using comma delimited strings as in <US,FR,Other>' +
-      'Leave the value control empty to filter empty strings or nulls' +
-      'For filters with comma in values, wrap them in single quotes' +
-      "as in <NY, 'Tahoe, CA', DC>",
+      expanded: true,
       controlSetRows: [['filters']],
     },
     {
       label: 'Result Filters',
+      expanded: true,
       description: 'The filters to apply after post-aggregation.' +
       'Leave the value control empty to filter empty strings or nulls',
       controlSetRows: [['having_filters']],
@@ -119,10 +121,16 @@ export const visTypes = {
     showOnExplore: true,
     controlPanelSections: [
       {
-        label: null,
+        label: 'Query',
+        expanded: true,
         controlSetRows: [
           ['metrics', 'groupby'],
           ['limit'],
+        ],
+      },
+      {
+        label: 'Chart Options',
+        controlSetRows: [
           ['pie_label_type'],
           ['donut', 'show_legend'],
           ['labels_outside'],
@@ -346,7 +354,7 @@ export const visTypes = {
     label: 'Markup',
     controlPanelSections: [
       {
-        label: null,
+        label: 'Code',
         controlSetRows: [
           ['markup_type'],
           ['code'],
@@ -359,12 +367,18 @@ export const visTypes = {
     label: 'Pivot Table',
     controlPanelSections: [
       {
-        label: null,
+        label: 'Query',
+        expanded: true,
         controlSetRows: [
           ['groupby', 'columns'],
-          ['metrics', 'pandas_aggfunc'],
+          ['metrics'],
+        ],
+      },
+      {
+        label: 'Pivot Options',
+        controlSetRows: [
+          ['pandas_aggfunc', 'pivot_margins'],
           ['number_format', 'combine_metric'],
-          ['pivot_margins'],
         ],
       },
     ],
@@ -378,7 +392,7 @@ export const visTypes = {
     label: 'Separator',
     controlPanelSections: [
       {
-        label: null,
+        label: 'Code',
         controlSetRows: [
           ['markup_type'],
           ['code'],
@@ -400,9 +414,15 @@ export const visTypes = {
     label: 'Word Cloud',
     controlPanelSections: [
       {
-        label: null,
+        label: 'Query',
+        expanded: true,
         controlSetRows: [
           ['series', 'metric', 'limit'],
+        ],
+      },
+      {
+        label: 'Options',
+        controlSetRows: [
           ['size_from', 'size_to'],
           ['rotation'],
           ['color_scheme'],
@@ -415,7 +435,8 @@ export const visTypes = {
     label: 'Treemap',
     controlPanelSections: [
       {
-        label: null,
+        label: 'Query',
+        expanded: true,
         controlSetRows: [
           ['metrics'],
           ['groupby'],
@@ -442,9 +463,15 @@ export const visTypes = {
     requiresTime: true,
     controlPanelSections: [
       {
-        label: null,
+        label: 'Query',
+        expanded: true,
         controlSetRows: [
           ['metric'],
+        ],
+      },
+      {
+        label: 'Options',
+        controlSetRows: [
           ['domain_granularity'],
           ['subdomain_granularity'],
         ],
@@ -456,7 +483,8 @@ export const visTypes = {
     label: 'Box Plot',
     controlPanelSections: [
       {
-        label: null,
+        label: 'Query',
+        expanded: true,
         controlSetRows: [
           ['metrics'],
           ['groupby', 'limit'],
@@ -476,7 +504,8 @@ export const visTypes = {
     label: 'Bubble Chart',
     controlPanelSections: [
       {
-        label: null,
+        label: 'Query',
+        expanded: true,
         controlSetRows: [
           ['series', 'entity'],
           ['size', 'limit'],
@@ -527,7 +556,14 @@ export const visTypes = {
     requiresTime: false,
     controlPanelSections: [
       {
-        label: null,
+        label: 'Query',
+        expanded: true,
+        controlSetRows: [
+          ['metric'],
+        ],
+      },
+      {
+        label: 'Chart Options',
         controlSetRows: [
           ['metric'],
           ['ranges', 'range_labels'],
@@ -542,9 +578,15 @@ export const visTypes = {
     label: 'Big Number with Trendline',
     controlPanelSections: [
       {
-        label: null,
+        label: 'Query',
+        expanded: true,
         controlSetRows: [
           ['metric'],
+        ],
+      },
+      {
+        label: 'Chart Options',
+        controlSetRows: [
           ['compare_lag', 'compare_suffix'],
           ['y_axis_format', null],
         ],
@@ -561,9 +603,15 @@ export const visTypes = {
     label: 'Big Number',
     controlPanelSections: [
       {
-        label: null,
+        label: 'Query',
+        expanded: true,
         controlSetRows: [
           ['metric'],
+        ],
+      },
+      {
+        label: 'Chart Options',
+        controlSetRows: [
           ['subheader'],
           ['y_axis_format'],
         ],
@@ -580,14 +628,15 @@ export const visTypes = {
     label: 'Histogram',
     controlPanelSections: [
       {
-        label: null,
+        label: 'Query',
+        expanded: true,
         controlSetRows: [
           ['all_columns_x'],
           ['row_limit'],
         ],
       },
       {
-        label: 'Histogram Options',
+        label: 'Chart Options',
         controlSetRows: [
           ['color_scheme'],
           ['link_length'],
@@ -611,11 +660,17 @@ export const visTypes = {
     label: 'Sunburst',
     controlPanelSections: [
       {
-        label: null,
+        label: 'Query',
+        expanded: true,
         controlSetRows: [
           ['groupby'],
           ['metric', 'secondary_metric'],
           ['row_limit'],
+        ],
+      },
+      {
+        label: 'Chart Options',
+        controlSetRows: [
           ['color_scheme'],
         ],
       },
@@ -642,11 +697,17 @@ export const visTypes = {
     label: 'Sankey',
     controlPanelSections: [
       {
-        label: null,
+        label: 'Query',
+        expanded: true,
         controlSetRows: [
           ['groupby'],
           ['metric'],
           ['row_limit'],
+        ],
+      },
+      {
+        label: 'Chart Options',
+        controlSetRows: [
           ['color_scheme'],
         ],
       },
@@ -663,7 +724,8 @@ export const visTypes = {
     label: 'Directed Force Layout',
     controlPanelSections: [
       {
-        label: null,
+        label: 'Query',
+        expanded: true,
         controlSetRows: [
           ['groupby'],
           ['metric'],
@@ -671,7 +733,7 @@ export const visTypes = {
         ],
       },
       {
-        label: 'Force Layout',
+        label: 'Options',
         controlSetRows: [
           ['link_length'],
           ['charge'],
@@ -689,11 +751,17 @@ export const visTypes = {
     label: 'Chord Diagram',
     controlPanelSections: [
       {
-        label: null,
+        label: 'Query',
+        expanded: true,
         controlSetRows: [
           ['groupby', 'columns'],
-          ['metric'],
-          ['row_limit', 'y_axis_format'],
+          ['metric', 'row_limit'],
+        ],
+      },
+      {
+        label: 'Chart Options',
+        controlSetRows: [
+          ['y_axis_format', null],
           ['color_scheme'],
         ],
       },
@@ -721,11 +789,17 @@ export const visTypes = {
     label: 'Country Map',
     controlPanelSections: [
       {
-        label: null,
+        label: 'Query',
+        expanded: true,
         controlSetRows: [
-          ['select_country'],
           ['entity'],
           ['metric'],
+        ],
+      },
+      {
+        label: 'Options',
+        controlSetRows: [
+          ['select_country'],
           ['linear_color_scheme'],
         ],
       },
@@ -748,7 +822,8 @@ export const visTypes = {
     label: 'World Map',
     controlPanelSections: [
       {
-        label: null,
+        label: 'Query',
+        expanded: true,
         controlSetRows: [
           ['entity'],
           ['country_fieldtype'],
@@ -784,13 +859,19 @@ export const visTypes = {
     label: 'Filter Box',
     controlPanelSections: [
       {
-        label: null,
+        label: 'Query',
+        expanded: true,
         controlSetRows: [
-          ['date_filter', 'instant_filtering'],
           ['groupby'],
           ['metric'],
         ],
       },
+      {
+        label: 'Options',
+        controlSetRows: [
+          ['date_filter', 'instant_filtering'],
+        ],
+      },
     ],
     controlOverrides: {
       groupby: {
@@ -810,7 +891,7 @@ export const visTypes = {
     label: 'iFrame',
     controlPanelSections: [
       {
-        label: null,
+        label: 'Options',
         controlSetRows: [
           ['url'],
         ],
@@ -822,12 +903,18 @@ export const visTypes = {
     label: 'Parallel Coordinates',
     controlPanelSections: [
       {
-        label: null,
+        label: 'Query',
+        expanded: true,
         controlSetRows: [
           ['series'],
           ['metrics'],
           ['secondary_metric'],
           ['limit'],
+        ],
+      },
+      {
+        label: 'Options',
+        controlSetRows: [
           ['show_datatable', 'include_series'],
         ],
       },
@@ -882,13 +969,13 @@ export const visTypes = {
     label: 'Mapbox',
     controlPanelSections: [
       {
-        label: null,
+        label: 'Query',
+        expanded: true,
         controlSetRows: [
           ['all_columns_x', 'all_columns_y'],
           ['clustering_radius'],
           ['row_limit'],
           ['groupby'],
-          ['render_while_dragging'],
         ],
       },
       {
@@ -908,6 +995,7 @@ export const visTypes = {
       {
         label: 'Visual Tweaks',
         controlSetRows: [
+          ['render_while_dragging'],
           ['mapbox_style'],
           ['global_opacity'],
           ['mapbox_color'],