diff --git a/README.md b/README.md
index cb412ddb..57d70bfc 100644
--- a/README.md
+++ b/README.md
@@ -10,34 +10,9 @@ jQuery plugin offering an simple interface to create complex queries.
 
 [![screenshot](https://raw.githubusercontent.com/mistic100/jQuery-QueryBuilder/master/examples/screenshot.png)](https://querybuilder.js.org)
 
-
-
 ## Documentation
 [querybuilder.js.org](https://querybuilder.js.org)
 
-
-
-## Install
-
-#### Manually
-
-[Download the latest release](https://github.com/mistic100/jQuery-QueryBuilder/releases)
-
-#### With Bower
-
-```bash
-$ bower install jQuery-QueryBuilder
-```
-
-#### With npm
-
-```bash
-$ npm install jQuery-QueryBuilder
-```
-
-#### Via CDN
-
-jQuery-QueryBuilder is available on [jsDelivr](https://www.jsdelivr.com/package/npm/jQuery-QueryBuilder).
 ### Dependencies
  * [jQuery 3](https://jquery.com)
  * [Bootstrap 3](https://getbootstrap.com/docs/3.3) (CSS only)
@@ -49,47 +24,30 @@ jQuery-QueryBuilder is available on [jsDelivr](https://www.jsdelivr.com/package/
 
 ($.extendext and doT.js are directly included in the [standalone](https://github.com/mistic100/jQuery-QueryBuilder/blob/master/dist/js/query-builder.standalone.js) file)
 
-### Browser support
- * Internet Explorer >= 9
- * All other recent browsers
-
-
-
-## Build
-
-#### Prerequisites
-
- * NodeJS + NPM: `apt-get install nodejs-legacy npm`
- * Grunt CLI: `npm install -g grunt-cli`
+### Run
 
-#### Run
+ * `npm install` to install Node dependencies .
+ * `npm run build` to build a standalone builder.
+ * `npm run serve` to open the example page with automatic build and livereload.
 
-Install Node dependencies `npm install` then run `grunt` in the root directory to generate production files inside `dist`.
+#### Options for show/hide feature
 
-#### Options
-
-You can choose which plugins to include with `--plugins` :
-```bash
-# include "sql-support" and "mongodb-support" plugins
-grunt --plugins=sql-support,mongodb-support
-
-# disable all plugins
-grunt --plugins=false
-```
-All plugins are included by default.
-
-You can also include language files with `--languages` :
+You can add feature show hide rule without missing rule in sql generate :
 ```bash
-# include French & Italian translation
-grunt --languages=fr,it
+# set "design_mode": true to declare design mode for QueryBuilder (we use it in design condition page)
+# set "design_mode": false to declare design mode for QueryBuilder (we use it in non design page)
+	var options = {
+    design_mode: true,
+	... }
+	
+	$('#builder').queryBuilder(options);
 ```
 
-#### Other commands
-
- * `grunt test` to run jshint/jscs/scsslint and the QUnit test suite.
- * `grunt serve` to open the example page with automatic build and livereload.
- * `grunt doc` to generate the documentation.
+![](images/designmode.png)
+#Design page
 
+![](images/nondesignmode.png)
+#Non-Design page
 
 ## License
 This library is available under the MIT license.
diff --git a/examples/index.html b/examples/index.html
index e6fc840f..0a61ff23 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -152,6 +152,7 @@ <h3>Output</h3>
   var $b = $('#builder');
 
   var options = {
+    design_mode: false,
     allow_empty: true,
 
     //default_filter: 'name',
@@ -393,7 +394,7 @@ <h3>Output</h3>
           step: 0.01
         },
         data: {
-          class: 'com.example.PriceTag'
+          show: true
         }
       },
       /*
@@ -548,56 +549,53 @@ <h3>Output</h3>
   // set rules
   $('.set').on('click', function() {
     $('#builder').queryBuilder('setRules', {
-      condition: 'AND',
-      flags: {
-        condition_readonly: true
+      'condition': 'AND',
+      'flags': {
+        'condition_readonly': true
       },
-      data: {
-        root: true
+      'data': {
+        'root': true
       },
-      rules: [{
-        id: 'price',
-        operator: 'between',
-        value: [10.25, 15.52],
-        flags: {
-          no_delete: true,
-          filter_readonly: true
-        },
-        data: {
-          unit: '€'
+      'flags': {
+        'condition_readonly': true
+      },
+      'not': false,
+      'valid': true,
+      "rules": [
+      {
+        "id": "name",
+        "field": "username",
+        "type": "string",
+        "input": "text",
+        "operator": "equal",
+        "value": "Quan",
+        "data": {
+          "show": true
         }
-      }, {
-        id: 'state',
-        operator: 'equal',
-        value: 'AK'
-      }, {
-        condition: 'OR',
-        not: true,
-        flags: {
-          no_delete: true,
-          no_drop: true,
-          no_sortable: true
-        },
-        rules: [{
-          id: 'category',
-          operator: 'equal',
-          value: 2
-        }, {
-          id: 'coord',
-          operator: 'equal',
-          value: undefined // will use filter's default value
-        }]
-      }, {
-        id: 'name',
-        operator: 'in',
-        value: ['Mistic', 'Damien']
-      }, {
-        id: 'age',
-        operator: 'in',
-        value: [20,21,22]
-      }, {
-        empty: true
-      }]
+      },
+      {
+        "id": "age",
+        "field": "age",
+        "type": "integer",
+        "input": "text",
+        "operator": "equal",
+        "value": 27,
+        "data": {
+          "show": true
+        }
+      },
+      {
+        "id": "continent",
+        "field": "continent",
+        "type": "string",
+        "input": "select",
+        "operator": "equal",
+        "value": "asia",
+        "data": {
+          "show": false
+        }
+      }
+    ]
     });
   });
 
diff --git a/images/designmode.png b/images/designmode.png
new file mode 100644
index 00000000..91012107
Binary files /dev/null and b/images/designmode.png differ
diff --git a/images/nondesignmode.png b/images/nondesignmode.png
new file mode 100644
index 00000000..9268e190
Binary files /dev/null and b/images/nondesignmode.png differ
diff --git a/images/screenshoot.png b/images/screenshoot.png
new file mode 100644
index 00000000..74968579
Binary files /dev/null and b/images/screenshoot.png differ
diff --git a/package.json b/package.json
index 6b650b9d..7be7c283 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
   "main": "dist/js/query-builder.js",
   "dependencies": {
     "bootstrap": ">=3.1.0 <4",
+    "bootswatch": "^4.3.1",
     "dot": ">=1.0.3",
     "jquery": "^3.3.1",
     "jquery-extendext": ">=0.1.2",
@@ -21,7 +22,6 @@
     "bootbox": "^4.4.0",
     "bootstrap-select": "^1.12.4",
     "bootstrap-slider": "^10.0.0",
-    "bootswatch-dist": "git+https://github.com/dbtek/bootswatch-dist.git#slate",
     "chosenjs": "^1.4.3",
     "deepmerge": "^2.1.0",
     "foodoc": "^0.0.9",
diff --git a/src/core.js b/src/core.js
index 305a9e53..8543decd 100644
--- a/src/core.js
+++ b/src/core.js
@@ -10,13 +10,12 @@ QueryBuilder.prototype.init = function(rules) {
      * @event afterInit
      * @memberof QueryBuilder
      */
-    this.trigger('afterInit');
+    this.trigger("afterInit");
 
     if (rules) {
         this.setRules(rules);
         delete this.settings.rules;
-    }
-    else {
+    } else {
         this.setRoot(true);
     }
 };
@@ -31,36 +30,43 @@ QueryBuilder.prototype.checkFilters = function(filters) {
     var definedFilters = [];
 
     if (!filters || filters.length === 0) {
-        Utils.error('Config', 'Missing filters list');
+        Utils.error("Config", "Missing filters list");
     }
 
     filters.forEach(function(filter, i) {
         if (!filter.id) {
-            Utils.error('Config', 'Missing filter {0} id', i);
+            Utils.error("Config", "Missing filter {0} id", i);
         }
         if (definedFilters.indexOf(filter.id) != -1) {
-            Utils.error('Config', 'Filter "{0}" already defined', filter.id);
+            Utils.error("Config", 'Filter "{0}" already defined', filter.id);
         }
         definedFilters.push(filter.id);
 
         if (!filter.type) {
-            filter.type = 'string';
-        }
-        else if (!QueryBuilder.types[filter.type]) {
-            Utils.error('Config', 'Invalid type "{0}"', filter.type);
+            filter.type = "string";
+        } else if (!QueryBuilder.types[filter.type]) {
+            Utils.error("Config", 'Invalid type "{0}"', filter.type);
         }
 
         if (!filter.input) {
-            filter.input = QueryBuilder.types[filter.type] === 'number' ? 'number' : 'text';
-        }
-        else if (typeof filter.input != 'function' && QueryBuilder.inputs.indexOf(filter.input) == -1) {
-            Utils.error('Config', 'Invalid input "{0}"', filter.input);
+            filter.input =
+                QueryBuilder.types[filter.type] === "number"
+                    ? "number"
+                    : "text";
+        } else if (
+            typeof filter.input != "function" &&
+            QueryBuilder.inputs.indexOf(filter.input) == -1
+        ) {
+            Utils.error("Config", 'Invalid input "{0}"', filter.input);
         }
 
         if (filter.operators) {
             filter.operators.forEach(function(operator) {
-                if (typeof operator != 'string') {
-                    Utils.error('Config', 'Filter operators must be global operators types (string)');
+                if (typeof operator != "string") {
+                    Utils.error(
+                        "Config",
+                        "Filter operators must be global operators types (string)"
+                    );
                 }
             });
         }
@@ -74,8 +80,7 @@ QueryBuilder.prototype.checkFilters = function(filters) {
 
         if (!filter.optgroup) {
             filter.optgroup = null;
-        }
-        else {
+        } else {
             this.status.has_optgroup = true;
 
             // register optgroup if needed
@@ -85,38 +90,44 @@ QueryBuilder.prototype.checkFilters = function(filters) {
         }
 
         switch (filter.input) {
-            case 'radio':
-            case 'checkbox':
+            case "radio":
+            case "checkbox":
                 if (!filter.values || filter.values.length < 1) {
-                    Utils.error('Config', 'Missing filter "{0}" values', filter.id);
+                    Utils.error(
+                        "Config",
+                        'Missing filter "{0}" values',
+                        filter.id
+                    );
                 }
                 break;
 
-            case 'select':
+            case "select":
                 var cleanValues = [];
                 filter.has_optgroup = false;
 
-                Utils.iterateOptions(filter.values, function(value, label, optgroup) {
-                    cleanValues.push({
-                        value: value,
-                        label: label,
-                        optgroup: optgroup || null
-                    });
-
-                    if (optgroup) {
-                        filter.has_optgroup = true;
-
-                        // register optgroup if needed
-                        if (!this.settings.optgroups[optgroup]) {
-                            this.settings.optgroups[optgroup] = optgroup;
+                Utils.iterateOptions(
+                    filter.values,
+                    function(value, label, optgroup) {
+                        cleanValues.push({
+                            value: value,
+                            label: label,
+                            optgroup: optgroup || null
+                        });
+
+                        if (optgroup) {
+                            filter.has_optgroup = true;
+
+                            // register optgroup if needed
+                            if (!this.settings.optgroups[optgroup]) {
+                                this.settings.optgroups[optgroup] = optgroup;
+                            }
                         }
-                    }
-                }.bind(this));
+                    }.bind(this)
+                );
 
                 if (filter.has_optgroup) {
-                    filter.values = Utils.groupSort(cleanValues, 'optgroup');
-                }
-                else {
+                    filter.values = Utils.groupSort(cleanValues, "optgroup");
+                } else {
                     filter.values = cleanValues;
                 }
 
@@ -127,7 +138,11 @@ QueryBuilder.prototype.checkFilters = function(filters) {
 
                     filter.values.forEach(function(entry) {
                         if (entry.value == filter.placeholder_value) {
-                            Utils.error('Config', 'Placeholder of filter "{0}" overlaps with one of its values', filter.id);
+                            Utils.error(
+                                "Config",
+                                'Placeholder of filter "{0}" overlaps with one of its values',
+                                filter.id
+                            );
                         }
                     });
                 }
@@ -136,19 +151,20 @@ QueryBuilder.prototype.checkFilters = function(filters) {
     }, this);
 
     if (this.settings.sort_filters) {
-        if (typeof this.settings.sort_filters == 'function') {
+        if (typeof this.settings.sort_filters == "function") {
             filters.sort(this.settings.sort_filters);
-        }
-        else {
+        } else {
             var self = this;
             filters.sort(function(a, b) {
-                return self.translate(a.label).localeCompare(self.translate(b.label));
+                return self
+                    .translate(a.label)
+                    .localeCompare(self.translate(b.label));
             });
         }
     }
 
     if (this.status.has_optgroup) {
-        filters = Utils.groupSort(filters, 'optgroup');
+        filters = Utils.groupSort(filters, "optgroup");
     }
 
     return filters;
@@ -164,36 +180,56 @@ QueryBuilder.prototype.checkOperators = function(operators) {
     var definedOperators = [];
 
     operators.forEach(function(operator, i) {
-        if (typeof operator == 'string') {
+        if (typeof operator == "string") {
             if (!QueryBuilder.OPERATORS[operator]) {
-                Utils.error('Config', 'Unknown operator "{0}"', operator);
+                Utils.error("Config", 'Unknown operator "{0}"', operator);
             }
 
-            operators[i] = operator = $.extendext(true, 'replace', {}, QueryBuilder.OPERATORS[operator]);
-        }
-        else {
+            operators[i] = operator = $.extendext(
+                true,
+                "replace",
+                {},
+                QueryBuilder.OPERATORS[operator]
+            );
+        } else {
             if (!operator.type) {
-                Utils.error('Config', 'Missing "type" for operator {0}', i);
+                Utils.error("Config", 'Missing "type" for operator {0}', i);
             }
 
             if (QueryBuilder.OPERATORS[operator.type]) {
-                operators[i] = operator = $.extendext(true, 'replace', {}, QueryBuilder.OPERATORS[operator.type], operator);
+                operators[i] = operator = $.extendext(
+                    true,
+                    "replace",
+                    {},
+                    QueryBuilder.OPERATORS[operator.type],
+                    operator
+                );
             }
 
-            if (operator.nb_inputs === undefined || operator.apply_to === undefined) {
-                Utils.error('Config', 'Missing "nb_inputs" and/or "apply_to" for operator "{0}"', operator.type);
+            if (
+                operator.nb_inputs === undefined ||
+                operator.apply_to === undefined
+            ) {
+                Utils.error(
+                    "Config",
+                    'Missing "nb_inputs" and/or "apply_to" for operator "{0}"',
+                    operator.type
+                );
             }
         }
 
         if (definedOperators.indexOf(operator.type) != -1) {
-            Utils.error('Config', 'Operator "{0}" already defined', operator.type);
+            Utils.error(
+                "Config",
+                'Operator "{0}" already defined',
+                operator.type
+            );
         }
         definedOperators.push(operator.type);
 
         if (!operator.optgroup) {
             operator.optgroup = null;
-        }
-        else {
+        } else {
             this.status.has_operator_optgroup = true;
 
             // register optgroup if needed
@@ -204,7 +240,7 @@ QueryBuilder.prototype.checkOperators = function(operators) {
     }, this);
 
     if (this.status.has_operator_optgroup) {
-        operators = Utils.groupSort(operators, 'optgroup');
+        operators = Utils.groupSort(operators, "optgroup");
     }
 
     return operators;
@@ -219,46 +255,53 @@ QueryBuilder.prototype.bindEvents = function() {
     var Selectors = QueryBuilder.selectors;
 
     // group condition change
-    this.$el.on('change.queryBuilder', Selectors.group_condition, function() {
-        if ($(this).is(':checked')) {
+    this.$el.on("change.queryBuilder", Selectors.group_condition, function() {
+        if ($(this).is(":checked")) {
             var $group = $(this).closest(Selectors.group_container);
             self.getModel($group).condition = $(this).val();
         }
     });
 
     // rule filter change
-    this.$el.on('change.queryBuilder', Selectors.rule_filter, function() {
+    this.$el.on("change.queryBuilder", Selectors.rule_filter, function() {
         var $rule = $(this).closest(Selectors.rule_container);
         self.getModel($rule).filter = self.getFilterById($(this).val());
     });
 
     // rule operator change
-    this.$el.on('change.queryBuilder', Selectors.rule_operator, function() {
+    this.$el.on("change.queryBuilder", Selectors.rule_operator, function() {
         var $rule = $(this).closest(Selectors.rule_container);
         self.getModel($rule).operator = self.getOperatorByType($(this).val());
     });
 
     // add rule button
-    this.$el.on('click.queryBuilder', Selectors.add_rule, function() {
+    this.$el.on("click.queryBuilder", Selectors.add_rule, function() {
         var $group = $(this).closest(Selectors.group_container);
         self.addRule(self.getModel($group));
     });
 
     // delete rule button
-    this.$el.on('click.queryBuilder', Selectors.delete_rule, function() {
+    this.$el.on("click.queryBuilder", Selectors.delete_rule, function() {
         var $rule = $(this).closest(Selectors.rule_container);
         self.deleteRule(self.getModel($rule));
     });
 
+    // show/hide rule checkbox
+    this.$el.on("click.queryBuilder", Selectors.show_rule, function() {
+        var $rule = $(this).closest(Selectors.rule_container);
+        var $value = $(this).prop("checked");
+        self.showRule(self.getModel($rule), $value);
+    });
+
     if (this.settings.allow_groups !== 0) {
         // add group button
-        this.$el.on('click.queryBuilder', Selectors.add_group, function() {
+        this.$el.on("click.queryBuilder", Selectors.add_group, function() {
             var $group = $(this).closest(Selectors.group_container);
             self.addGroup(self.getModel($group));
         });
 
         // delete group button
-        this.$el.on('click.queryBuilder', Selectors.delete_group, function() {
+        this.$el.on("click.queryBuilder", Selectors.delete_group, function() {
             var $group = $(this).closest(Selectors.group_container);
             self.deleteGroup(self.getModel($group));
         });
@@ -266,65 +309,66 @@ QueryBuilder.prototype.bindEvents = function() {
 
     // model events
     this.model.on({
-        'drop': function(e, node) {
+        drop: function(e, node) {
             node.$el.remove();
             self.refreshGroupsConditions();
         },
-        'add': function(e, parent, node, index) {
+        add: function(e, parent, node, index) {
             if (index === 0) {
-                node.$el.prependTo(parent.$el.find('>' + QueryBuilder.selectors.rules_list));
-            }
-            else {
+                node.$el.prependTo(
+                    parent.$el.find(">" + QueryBuilder.selectors.rules_list)
+                );
+            } else {
                 node.$el.insertAfter(parent.rules[index - 1].$el);
             }
             self.refreshGroupsConditions();
         },
-        'move': function(e, node, group, index) {
+        move: function(e, node, group, index) {
             node.$el.detach();
 
             if (index === 0) {
-                node.$el.prependTo(group.$el.find('>' + QueryBuilder.selectors.rules_list));
-            }
-            else {
+                node.$el.prependTo(
+                    group.$el.find(">" + QueryBuilder.selectors.rules_list)
+                );
+            } else {
                 node.$el.insertAfter(group.rules[index - 1].$el);
             }
             self.refreshGroupsConditions();
         },
-        'update': function(e, node, field, value, oldValue) {
+        update: function(e, node, field, value, oldValue) {
             if (node instanceof Rule) {
                 switch (field) {
-                    case 'error':
+                    case "error":
                         self.updateError(node);
                         break;
 
-                    case 'flags':
+                    case "flags":
                         self.applyRuleFlags(node);
                         break;
 
-                    case 'filter':
+                    case "filter":
                         self.updateRuleFilter(node, oldValue);
                         break;
 
-                    case 'operator':
+                    case "operator":
                         self.updateRuleOperator(node, oldValue);
                         break;
 
-                    case 'value':
+                    case "value":
                         self.updateRuleValue(node, oldValue);
                         break;
                 }
-            }
-            else {
+            } else {
                 switch (field) {
-                    case 'error':
+                    case "error":
                         self.updateError(node);
                         break;
 
-                    case 'flags':
+                    case "flags":
                         self.applyGroupFlags(node);
                         break;
 
-                    case 'condition':
+                    case "condition":
                         self.updateGroupCondition(node, oldValue);
                         break;
                 }
@@ -342,7 +386,7 @@ QueryBuilder.prototype.bindEvents = function() {
  * @fires QueryBuilder.afterAddGroup
  */
 QueryBuilder.prototype.setRoot = function(addRule, data, flags) {
-    addRule = (addRule === undefined || addRule === true);
+    addRule = addRule === undefined || addRule === true;
 
     var group_id = this.nextGroupId();
     var $group = $(this.getGroupTemplate(group_id, 1));
@@ -352,10 +396,14 @@ QueryBuilder.prototype.setRoot = function(addRule, data, flags) {
     this.model.root.model = this.model;
 
     this.model.root.data = data;
-    this.model.root.flags = $.extend({}, this.settings.default_group_flags, flags);
+    this.model.root.flags = $.extend(
+        {},
+        this.settings.default_group_flags,
+        flags
+    );
     this.model.root.condition = this.settings.default_condition;
 
-    this.trigger('afterAddGroup', this.model.root);
+    this.trigger("afterAddGroup", this.model.root);
 
     if (addRule) {
         this.addRule(this.model.root);
@@ -375,7 +423,7 @@ QueryBuilder.prototype.setRoot = function(addRule, data, flags) {
  * @fires QueryBuilder.afterAddGroup
  */
 QueryBuilder.prototype.addGroup = function(parent, addRule, data, flags) {
-    addRule = (addRule === undefined || addRule === true);
+    addRule = addRule === undefined || addRule === true;
 
     var level = parent.level + 1;
 
@@ -387,7 +435,7 @@ QueryBuilder.prototype.addGroup = function(parent, addRule, data, flags) {
      * @param {boolean} addRule - if an empty rule will be added in the group
      * @param {int} level - nesting level of the group, 1 is the root group
      */
-    var e = this.trigger('beforeAddGroup', parent, addRule, level);
+    var e = this.trigger("beforeAddGroup", parent, addRule, level);
     if (e.isDefaultPrevented()) {
         return null;
     }
@@ -406,14 +454,14 @@ QueryBuilder.prototype.addGroup = function(parent, addRule, data, flags) {
      * @memberof QueryBuilder
      * @param {Group} group
      */
-    this.trigger('afterAddGroup', model);
+    this.trigger("afterAddGroup", model);
 
     /**
      * After any change in the rules
      * @event rulesChanged
      * @memberof QueryBuilder
      */
-    this.trigger('rulesChanged');
+    this.trigger("rulesChanged");
 
     if (addRule) {
         this.addRule(model);
@@ -440,18 +488,23 @@ QueryBuilder.prototype.deleteGroup = function(group) {
      * @memberof QueryBuilder
      * @param {Group} parent
      */
-    var e = this.trigger('beforeDeleteGroup', group);
+    var e = this.trigger("beforeDeleteGroup", group);
     if (e.isDefaultPrevented()) {
         return false;
     }
 
     var del = true;
 
-    group.each('reverse', function(rule) {
-        del &= this.deleteRule(rule);
-    }, function(group) {
-        del &= this.deleteGroup(group);
-    }, this);
+    group.each(
+        "reverse",
+        function(rule) {
+            del &= this.deleteRule(rule);
+        },
+        function(group) {
+            del &= this.deleteGroup(group);
+        },
+        this
+    );
 
     if (del) {
         group.drop();
@@ -461,9 +514,9 @@ QueryBuilder.prototype.deleteGroup = function(group) {
          * @event afterDeleteGroup
          * @memberof QueryBuilder
          */
-        this.trigger('afterDeleteGroup');
+        this.trigger("afterDeleteGroup");
 
-        this.trigger('rulesChanged');
+        this.trigger("rulesChanged");
     }
 
     return del;
@@ -476,12 +529,19 @@ QueryBuilder.prototype.deleteGroup = function(group) {
  * @fires QueryBuilder.afterUpdateGroupCondition
  * @private
  */
-QueryBuilder.prototype.updateGroupCondition = function(group, previousCondition) {
-    group.$el.find('>' + QueryBuilder.selectors.group_condition).each(function() {
-        var $this = $(this);
-        $this.prop('checked', $this.val() === group.condition);
-        $this.parent().toggleClass('active', $this.val() === group.condition);
-    });
+QueryBuilder.prototype.updateGroupCondition = function(
+    group,
+    previousCondition
+) {
+    group.$el
+        .find(">" + QueryBuilder.selectors.group_condition)
+        .each(function() {
+            var $this = $(this);
+            $this.prop("checked", $this.val() === group.condition);
+            $this
+                .parent()
+                .toggleClass("active", $this.val() === group.condition);
+        });
 
     /**
      * After the group condition has been modified
@@ -490,9 +550,9 @@ QueryBuilder.prototype.updateGroupCondition = function(group, previousCondition)
      * @param {Group} group
      * @param {object} previousCondition
      */
-    this.trigger('afterUpdateGroupCondition', group, previousCondition);
+    this.trigger("afterUpdateGroupCondition", group, previousCondition);
 
-    this.trigger('rulesChanged');
+    this.trigger("rulesChanged");
 };
 
 /**
@@ -502,14 +562,21 @@ QueryBuilder.prototype.updateGroupCondition = function(group, previousCondition)
 QueryBuilder.prototype.refreshGroupsConditions = function() {
     (function walk(group) {
         if (!group.flags || (group.flags && !group.flags.condition_readonly)) {
-            group.$el.find('>' + QueryBuilder.selectors.group_condition).prop('disabled', group.rules.length <= 1)
-                .parent().toggleClass('disabled', group.rules.length <= 1);
+            group.$el
+                .find(">" + QueryBuilder.selectors.group_condition)
+                .prop("disabled", group.rules.length <= 1)
+                .parent()
+                .toggleClass("disabled", group.rules.length <= 1);
         }
 
-        group.each(null, function(group) {
-            walk(group);
-        }, this);
-    }(this.model.root));
+        group.each(
+            null,
+            function(group) {
+                walk(group);
+            },
+            this
+        );
+    })(this.model.root);
 };
 
 /**
@@ -529,16 +596,23 @@ QueryBuilder.prototype.addRule = function(parent, data, flags) {
      * @memberof QueryBuilder
      * @param {Group} parent
      */
-    var e = this.trigger('beforeAddRule', parent);
+    var e = this.trigger("beforeAddRule", parent);
     if (e.isDefaultPrevented()) {
         return null;
     }
 
     var rule_id = this.nextRuleId();
-    var $rule = $(this.getRuleTemplate(rule_id));
-    var model = parent.addRule($rule);
+    var is_show = true;
+    if (data) {
+        if (data.show !== undefined) {
+            is_show = data.show;
+        }
+    } else {
+        data = { data: { show: true } };
+    }
 
-    model.data = data;
+    var $rule = $(this.getRuleTemplate(rule_id, is_show));
+    var model = parent.addRule($rule);
     model.flags = $.extend({}, this.settings.default_rule_flags, flags);
 
     /**
@@ -547,9 +621,9 @@ QueryBuilder.prototype.addRule = function(parent, data, flags) {
      * @memberof QueryBuilder
      * @param {Rule} rule
      */
-    this.trigger('afterAddRule', model);
+    this.trigger("afterAddRule", model);
 
-    this.trigger('rulesChanged');
+    this.trigger("rulesChanged");
 
     this.createRuleFilters(model);
 
@@ -562,8 +636,11 @@ QueryBuilder.prototype.addRule = function(parent, data, flags) {
          * @param {Rule} rule
          * @returns {QueryBuilder.Filter}
          */
-        model.filter = this.change('getDefaultFilter',
-            this.getFilterById(this.settings.default_filter || this.filters[0].id),
+        model.filter = this.change(
+            "getDefaultFilter",
+            this.getFilterById(
+                this.settings.default_filter || this.filters[0].id
+            ),
             model
         );
     }
@@ -589,7 +666,7 @@ QueryBuilder.prototype.deleteRule = function(rule) {
      * @memberof QueryBuilder
      * @param {Rule} rule
      */
-    var e = this.trigger('beforeDeleteRule', rule);
+    var e = this.trigger("beforeDeleteRule", rule);
     if (e.isDefaultPrevented()) {
         return false;
     }
@@ -601,13 +678,23 @@ QueryBuilder.prototype.deleteRule = function(rule) {
      * @event afterDeleteRule
      * @memberof QueryBuilder
      */
-    this.trigger('afterDeleteRule');
+    this.trigger("afterDeleteRule");
 
-    this.trigger('rulesChanged');
+    this.trigger("rulesChanged");
 
     return true;
 };
 
+/**
+ * Tries to show/hide a rule
+ * @param {Rule} rule
+ * @param {boolean} value
+ * @returns {boolean} if the rule has been deleted
+ */
+QueryBuilder.prototype.showRule = function(rule, value) {
+    rule.data = $.extendext(true, "extend", {}, rule.data, { show: value });
+};
+
 /**
  * Creates the filters for a rule
  * @param {Rule} rule
@@ -624,7 +711,7 @@ QueryBuilder.prototype.createRuleFilters = function(rule) {
      * @param {Rule} rule
      * @returns {QueryBuilder.Filter[]}
      */
-    var filters = this.change('getRuleFilters', this.filters, rule);
+    var filters = this.change("getRuleFilters", this.filters, rule);
     var $filterSelect = $(this.getRuleFilterSelect(rule, filters));
 
     rule.$el.find(QueryBuilder.selectors.filter_container).html($filterSelect);
@@ -635,7 +722,7 @@ QueryBuilder.prototype.createRuleFilters = function(rule) {
      * @memberof QueryBuilder
      * @param {Rule} rule
      */
-    this.trigger('afterCreateRuleFilters', rule);
+    this.trigger("afterCreateRuleFilters", rule);
 
     this.applyRuleFlags(rule);
 };
@@ -647,7 +734,9 @@ QueryBuilder.prototype.createRuleFilters = function(rule) {
  * @private
  */
 QueryBuilder.prototype.createRuleOperators = function(rule) {
-    var $operatorContainer = rule.$el.find(QueryBuilder.selectors.operator_container).empty();
+    var $operatorContainer = rule.$el
+        .find(QueryBuilder.selectors.operator_container)
+        .empty();
 
     if (!rule.filter) {
         return;
@@ -661,8 +750,7 @@ QueryBuilder.prototype.createRuleOperators = function(rule) {
     // set the operator without triggering update event
     if (rule.filter.default_operator) {
         rule.__.operator = this.getOperatorByType(rule.filter.default_operator);
-    }
-    else {
+    } else {
         rule.__.operator = operators[0];
     }
 
@@ -675,7 +763,7 @@ QueryBuilder.prototype.createRuleOperators = function(rule) {
      * @param {Rule} rule
      * @param {QueryBuilder.Operator[]} operators - allowed operators for this rule
      */
-    this.trigger('afterCreateRuleOperators', rule, operators);
+    this.trigger("afterCreateRuleOperators", rule, operators);
 
     this.applyRuleFlags(rule);
 };
@@ -687,7 +775,9 @@ QueryBuilder.prototype.createRuleOperators = function(rule) {
  * @private
  */
 QueryBuilder.prototype.createRuleInput = function(rule) {
-    var $valueContainer = rule.$el.find(QueryBuilder.selectors.value_container).empty();
+    var $valueContainer = rule.$el
+        .find(QueryBuilder.selectors.value_container)
+        .empty();
 
     rule.__.value = undefined;
 
@@ -706,9 +796,9 @@ QueryBuilder.prototype.createRuleInput = function(rule) {
         $inputs = $inputs.add($ruleInput);
     }
 
-    $valueContainer.css('display', '');
+    $valueContainer.css("display", "");
 
-    $inputs.on('change ' + (filter.input_event || ''), function() {
+    $inputs.on("change " + (filter.input_event || ""), function() {
         if (!rule._updating_input) {
             rule._updating_value = true;
             rule.value = self.getRuleInputValue(rule);
@@ -726,12 +816,11 @@ QueryBuilder.prototype.createRuleInput = function(rule) {
      * @memberof QueryBuilder
      * @param {Rule} rule
      */
-    this.trigger('afterCreateRuleInput', rule);
+    this.trigger("afterCreateRuleInput", rule);
 
     if (filter.default_value !== undefined) {
         rule.value = filter.default_value;
-    }
-    else {
+    } else {
         rule._updating_value = true;
         rule.value = self.getRuleInputValue(rule);
         rule._updating_value = false;
@@ -751,7 +840,9 @@ QueryBuilder.prototype.updateRuleFilter = function(rule, previousFilter) {
     this.createRuleOperators(rule);
     this.createRuleInput(rule);
 
-    rule.$el.find(QueryBuilder.selectors.rule_filter).val(rule.filter ? rule.filter.id : '-1');
+    rule.$el
+        .find(QueryBuilder.selectors.rule_filter)
+        .val(rule.filter ? rule.filter.id : "-1");
 
     // clear rule data if the filter changed
     if (previousFilter && rule.filter && previousFilter.id !== rule.filter.id) {
@@ -765,9 +856,9 @@ QueryBuilder.prototype.updateRuleFilter = function(rule, previousFilter) {
      * @param {Rule} rule
      * @param {object} previousFilter
      */
-    this.trigger('afterUpdateRuleFilter', rule, previousFilter);
+    this.trigger("afterUpdateRuleFilter", rule, previousFilter);
 
-    this.trigger('rulesChanged');
+    this.trigger("rulesChanged");
 };
 
 /**
@@ -784,11 +875,12 @@ QueryBuilder.prototype.updateRuleOperator = function(rule, previousOperator) {
         $valueContainer.hide();
 
         rule.__.value = undefined;
-    }
-    else {
-        $valueContainer.css('display', '');
+    } else {
+        $valueContainer.css("display", "");
 
-        if ($valueContainer.is(':empty') || !previousOperator ||
+        if (
+            $valueContainer.is(":empty") ||
+            !previousOperator ||
             rule.operator.nb_inputs !== previousOperator.nb_inputs ||
             rule.operator.optgroup !== previousOperator.optgroup
         ) {
@@ -797,7 +889,9 @@ QueryBuilder.prototype.updateRuleOperator = function(rule, previousOperator) {
     }
 
     if (rule.operator) {
-        rule.$el.find(QueryBuilder.selectors.rule_operator).val(rule.operator.type);
+        rule.$el
+            .find(QueryBuilder.selectors.rule_operator)
+            .val(rule.operator.type);
 
         // refresh value if the format changed for this operator
         rule.__.value = this.getRuleInputValue(rule);
@@ -810,9 +904,9 @@ QueryBuilder.prototype.updateRuleOperator = function(rule, previousOperator) {
      * @param {Rule} rule
      * @param {object} previousOperator
      */
-    this.trigger('afterUpdateRuleOperator', rule, previousOperator);
+    this.trigger("afterUpdateRuleOperator", rule, previousOperator);
 
-    this.trigger('rulesChanged');
+    this.trigger("rulesChanged");
 };
 
 /**
@@ -834,9 +928,9 @@ QueryBuilder.prototype.updateRuleValue = function(rule, previousValue) {
      * @param {Rule} rule
      * @param {*} previousValue
      */
-    this.trigger('afterUpdateRuleValue', rule, previousValue);
+    this.trigger("afterUpdateRuleValue", rule, previousValue);
 
-    this.trigger('rulesChanged');
+    this.trigger("rulesChanged");
 };
 
 /**
@@ -849,9 +943,13 @@ QueryBuilder.prototype.applyRuleFlags = function(rule) {
     var flags = rule.flags;
     var Selectors = QueryBuilder.selectors;
 
-    rule.$el.find(Selectors.rule_filter).prop('disabled', flags.filter_readonly);
-    rule.$el.find(Selectors.rule_operator).prop('disabled', flags.operator_readonly);
-    rule.$el.find(Selectors.rule_value).prop('disabled', flags.value_readonly);
+    rule.$el
+        .find(Selectors.rule_filter)
+        .prop("disabled", flags.filter_readonly);
+    rule.$el
+        .find(Selectors.rule_operator)
+        .prop("disabled", flags.operator_readonly);
+    rule.$el.find(Selectors.rule_value).prop("disabled", flags.value_readonly);
 
     if (flags.no_delete) {
         rule.$el.find(Selectors.delete_rule).remove();
@@ -863,7 +961,7 @@ QueryBuilder.prototype.applyRuleFlags = function(rule) {
      * @memberof QueryBuilder
      * @param {Rule} rule
      */
-    this.trigger('afterApplyRuleFlags', rule);
+    this.trigger("afterApplyRuleFlags", rule);
 };
 
 /**
@@ -876,8 +974,11 @@ QueryBuilder.prototype.applyGroupFlags = function(group) {
     var flags = group.flags;
     var Selectors = QueryBuilder.selectors;
 
-    group.$el.find('>' + Selectors.group_condition).prop('disabled', flags.condition_readonly)
-        .parent().toggleClass('readonly', flags.condition_readonly);
+    group.$el
+        .find(">" + Selectors.group_condition)
+        .prop("disabled", flags.condition_readonly)
+        .parent()
+        .toggleClass("readonly", flags.condition_readonly);
 
     if (flags.no_add_rule) {
         group.$el.find(Selectors.add_rule).remove();
@@ -895,7 +996,7 @@ QueryBuilder.prototype.applyGroupFlags = function(group) {
      * @memberof QueryBuilder
      * @param {Group} group
      */
-    this.trigger('afterApplyGroupFlags', group);
+    this.trigger("afterApplyGroupFlags", group);
 };
 
 /**
@@ -912,11 +1013,15 @@ QueryBuilder.prototype.clearErrors = function(node) {
     node.error = null;
 
     if (node instanceof Group) {
-        node.each(function(rule) {
-            rule.error = null;
-        }, function(group) {
-            this.clearErrors(group);
-        }, this);
+        node.each(
+            function(rule) {
+                rule.error = null;
+            },
+            function(group) {
+                this.clearErrors(group);
+            },
+            this
+        );
     }
 };
 
@@ -929,10 +1034,9 @@ QueryBuilder.prototype.clearErrors = function(node) {
 QueryBuilder.prototype.updateError = function(node) {
     if (this.settings.display_errors) {
         if (node.error === null) {
-            node.$el.removeClass('has-error');
-        }
-        else {
-            var errorMessage = this.translate('errors', node.error[0]);
+            node.$el.removeClass("has-error");
+        } else {
+            var errorMessage = this.translate("errors", node.error[0]);
             errorMessage = Utils.fmt(errorMessage, node.error.slice(1));
 
             /**
@@ -944,11 +1048,18 @@ QueryBuilder.prototype.updateError = function(node) {
              * @param {Node} node
              * @returns {string}
              */
-            errorMessage = this.change('displayError', errorMessage, node.error, node);
-
-            node.$el.addClass('has-error')
-                .find(QueryBuilder.selectors.error_container).eq(0)
-                .attr('title', errorMessage);
+            errorMessage = this.change(
+                "displayError",
+                errorMessage,
+                node.error,
+                node
+            );
+
+            node.$el
+                .addClass("has-error")
+                .find(QueryBuilder.selectors.error_container)
+                .eq(0)
+                .attr("title", errorMessage);
         }
     }
 };
@@ -974,7 +1085,7 @@ QueryBuilder.prototype.triggerValidationError = function(node, error, value) {
      * @param {string} error
      * @param {*} value
      */
-    var e = this.trigger('validationError', node, error, value);
+    var e = this.trigger("validationError", node, error, value);
     if (!e.isDefaultPrevented()) {
         node.error = error;
     }
diff --git a/src/data.js b/src/data.js
index 304f8341..3d827643 100644
--- a/src/data.js
+++ b/src/data.js
@@ -517,7 +517,6 @@ QueryBuilder.prototype.setRuleInputValue = function(rule, value) {
  */
 QueryBuilder.prototype.parseRuleFlags = function(rule) {
     var flags = $.extend({}, this.settings.default_rule_flags);
-
     if (rule.readonly) {
         $.extend(flags, {
             filter_readonly: true,
diff --git a/src/defaults.js b/src/defaults.js
index b6c5a5eb..f70df427 100644
--- a/src/defaults.js
+++ b/src/defaults.js
@@ -72,7 +72,9 @@ QueryBuilder.selectors = {
     add_rule:             '[data-add=rule]',
     delete_rule:          '[data-delete=rule]',
     add_group:            '[data-add=group]',
-    delete_group:         '[data-delete=group]'
+    delete_group:         '[data-delete=group]',
+
+    show_rule:            '[data-show=rule]'
 };
 
 /**
diff --git a/src/main.js b/src/main.js
index f799af6f..da366806 100644
--- a/src/main.js
+++ b/src/main.js
@@ -48,6 +48,8 @@ var QueryBuilder = function($el, options) {
      * @property {int} rule_id - current rule id
      * @property {boolean} has_optgroup - if filters have optgroups
      * @property {boolean} has_operator_optgroup - if operators have optgroups
+     * @property {boolean} design_mode - true for design screen, checkbox for each rule is visible - false for excute screen, checkbox for each rule is disable
+     * @property {boolean} is_show - true for show rule - false for hide off current rule
      * @readonly
      * @private
      */
@@ -57,9 +59,16 @@ var QueryBuilder = function($el, options) {
         group_id: 0,
         rule_id: 0,
         has_optgroup: false,
-        has_operator_optgroup: false
+        has_operator_optgroup: false,
+        design_mode: false,
+        is_show: true
     };
 
+    if(options.design_mode !== undefined)
+    {
+        this.status.design_mode = options.design_mode;
+    }
+
     /**
      * List of filters
      * @member {QueryBuilder.Filter[]}
diff --git a/src/model.js b/src/model.js
index a397c98f..ad1691df 100644
--- a/src/model.js
+++ b/src/model.js
@@ -518,6 +518,7 @@ var Rule = function(parent, $el) {
      * @instance
      */
     this.__.value = undefined;
+    this.show = true;
 };
 
 Rule.prototype = Object.create(Node.prototype);
diff --git a/src/public.js b/src/public.js
index 79491b96..8bba4346 100644
--- a/src/public.js
+++ b/src/public.js
@@ -8,19 +8,19 @@ QueryBuilder.prototype.destroy = function() {
      * @event beforeDestroy
      * @memberof QueryBuilder
      */
-    this.trigger('beforeDestroy');
+    this.trigger("beforeDestroy");
 
     if (this.status.generated_id) {
-        this.$el.removeAttr('id');
+        this.$el.removeAttr("id");
     }
 
     this.clear();
     this.model = null;
 
     this.$el
-        .off('.queryBuilder')
-        .removeClass('query-builder')
-        .removeData('queryBuilder');
+        .off(".queryBuilder")
+        .removeClass("query-builder")
+        .removeData("queryBuilder");
 
     delete this.$el[0].queryBuilder;
 };
@@ -36,7 +36,7 @@ QueryBuilder.prototype.reset = function() {
      * @event beforeReset
      * @memberof QueryBuilder
      */
-    var e = this.trigger('beforeReset');
+    var e = this.trigger("beforeReset");
     if (e.isDefaultPrevented()) {
         return;
     }
@@ -57,9 +57,9 @@ QueryBuilder.prototype.reset = function() {
      * @event afterReset
      * @memberof QueryBuilder
      */
-    this.trigger('afterReset');
+    this.trigger("afterReset");
 
-    this.trigger('rulesChanged');
+    this.trigger("rulesChanged");
 };
 
 /**
@@ -73,7 +73,7 @@ QueryBuilder.prototype.clear = function() {
      * @event beforeClear
      * @memberof QueryBuilder
      */
-    var e = this.trigger('beforeClear');
+    var e = this.trigger("beforeClear");
     if (e.isDefaultPrevented()) {
         return;
     }
@@ -91,9 +91,9 @@ QueryBuilder.prototype.clear = function() {
      * @event afterClear
      * @memberof QueryBuilder
      */
-    this.trigger('afterClear');
+    this.trigger("afterClear");
 
-    this.trigger('rulesChanged');
+    this.trigger("rulesChanged");
 };
 
 /**
@@ -102,11 +102,14 @@ QueryBuilder.prototype.clear = function() {
  * @param {object} options
  */
 QueryBuilder.prototype.setOptions = function(options) {
-    $.each(options, function(opt, value) {
-        if (QueryBuilder.modifiable_options.indexOf(opt) !== -1) {
-            this.settings[opt] = value;
-        }
-    }.bind(this));
+    $.each(
+        options,
+        function(opt, value) {
+            if (QueryBuilder.modifiable_options.indexOf(opt) !== -1) {
+                this.settings[opt] = value;
+            }
+        }.bind(this)
+    );
 };
 
 /**
@@ -117,12 +120,10 @@ QueryBuilder.prototype.setOptions = function(options) {
 QueryBuilder.prototype.getModel = function(target) {
     if (!target) {
         return this.model.root;
-    }
-    else if (target instanceof Node) {
+    } else if (target instanceof Node) {
         return target;
-    }
-    else {
-        return $(target).data('queryBuilderModel');
+    } else {
+        return $(target).data("queryBuilderModel");
     }
 };
 
@@ -134,9 +135,12 @@ QueryBuilder.prototype.getModel = function(target) {
  * @fires QueryBuilder.changer:validate
  */
 QueryBuilder.prototype.validate = function(options) {
-    options = $.extend({
-        skip_empty: false
-    }, options);
+    options = $.extend(
+        {
+            skip_empty: false
+        },
+        options
+    );
 
     this.clearErrors();
 
@@ -146,59 +150,60 @@ QueryBuilder.prototype.validate = function(options) {
         var done = 0;
         var errors = 0;
 
-        group.each(function(rule) {
-            if (!rule.filter && options.skip_empty) {
-                return;
-            }
-
-            if (!rule.filter) {
-                self.triggerValidationError(rule, 'no_filter', null);
-                errors++;
-                return;
-            }
-
-            if (!rule.operator) {
-                self.triggerValidationError(rule, 'no_operator', null);
-                errors++;
-                return;
-            }
+        group.each(
+            function(rule) {
+                if (!rule.filter && options.skip_empty) {
+                    return;
+                }
 
-            if (rule.operator.nb_inputs !== 0) {
-                var valid = self.validateValue(rule, rule.value);
+                if (!rule.filter) {
+                    self.triggerValidationError(rule, "no_filter", null);
+                    errors++;
+                    return;
+                }
 
-                if (valid !== true) {
-                    self.triggerValidationError(rule, valid, rule.value);
+                if (!rule.operator) {
+                    self.triggerValidationError(rule, "no_operator", null);
                     errors++;
                     return;
                 }
-            }
 
-            done++;
+                if (rule.operator.nb_inputs !== 0) {
+                    var valid = self.validateValue(rule, rule.value);
+
+                    if (valid !== true) {
+                        self.triggerValidationError(rule, valid, rule.value);
+                        errors++;
+                        return;
+                    }
+                }
 
-        }, function(group) {
-            var res = parse(group);
-            if (res === true) {
                 done++;
+            },
+            function(group) {
+                var res = parse(group);
+                if (res === true) {
+                    done++;
+                } else if (res === false) {
+                    errors++;
+                }
             }
-            else if (res === false) {
-                errors++;
-            }
-        });
+        );
 
         if (errors > 0) {
             return false;
-        }
-        else if (done === 0 && !group.isRoot() && options.skip_empty) {
+        } else if (done === 0 && !group.isRoot() && options.skip_empty) {
             return null;
-        }
-        else if (done === 0 && (!self.settings.allow_empty || !group.isRoot())) {
-            self.triggerValidationError(group, 'empty_group', null);
+        } else if (
+            done === 0 &&
+            (!self.settings.allow_empty || !group.isRoot())
+        ) {
+            self.triggerValidationError(group, "empty_group", null);
             return false;
         }
 
         return true;
-
-    }(this.model.root));
+    })(this.model.root);
 
     /**
      * Modifies the result of the {@link QueryBuilder#validate} method
@@ -207,7 +212,7 @@ QueryBuilder.prototype.validate = function(options) {
      * @param {boolean} valid
      * @returns {boolean}
      */
-    return this.change('validate', valid);
+    return this.change("validate", valid);
 };
 
 /**
@@ -222,11 +227,14 @@ QueryBuilder.prototype.validate = function(options) {
  * @fires QueryBuilder.changer:getRules
  */
 QueryBuilder.prototype.getRules = function(options) {
-    options = $.extend({
-        get_flags: false,
-        allow_invalid: false,
-        skip_empty: false
-    }, options);
+    options = $.extend(
+        {
+            get_flags: false,
+            allow_invalid: false,
+            skip_empty: false
+        },
+        options
+    );
 
     var valid = this.validate(options);
     if (!valid && !options.allow_invalid) {
@@ -242,62 +250,82 @@ QueryBuilder.prototype.getRules = function(options) {
         };
 
         if (group.data) {
-            groupData.data = $.extendext(true, 'replace', {}, group.data);
+            groupData.data = $.extendext(true, "replace", {}, group.data);
         }
 
         if (options.get_flags) {
-            var flags = self.getGroupFlags(group.flags, options.get_flags === 'all');
+            var flags = self.getGroupFlags(
+                group.flags,
+                options.get_flags === "all"
+            );
             if (!$.isEmptyObject(flags)) {
                 groupData.flags = flags;
             }
         }
 
-        group.each(function(rule) {
-            if (!rule.filter && options.skip_empty) {
-                return;
-            }
+        group.each(
+            function(rule) {
+                
 
-            var value = null;
-            if (!rule.operator || rule.operator.nb_inputs !== 0) {
-                value = rule.value;
-            }
+                if (!rule.filter && options.skip_empty) {
+                    return;
+                }
 
-            var ruleData = {
-                id: rule.filter ? rule.filter.id : null,
-                field: rule.filter ? rule.filter.field : null,
-                type: rule.filter ? rule.filter.type : null,
-                input: rule.filter ? rule.filter.input : null,
-                operator: rule.operator ? rule.operator.type : null,
-                value: value
-            };
-
-            if (rule.filter && rule.filter.data || rule.data) {
-                ruleData.data = $.extendext(true, 'replace', {}, rule.filter.data, rule.data);
-            }
+                var value = null;
+                if (!rule.operator || rule.operator.nb_inputs !== 0) {
+                    value = rule.value;
+                }
 
-            if (options.get_flags) {
-                var flags = self.getRuleFlags(rule.flags, options.get_flags === 'all');
-                if (!$.isEmptyObject(flags)) {
-                    ruleData.flags = flags;
+                var ruleData = {
+                    id: rule.filter ? rule.filter.id : null,
+                    field: rule.filter ? rule.filter.field : null,
+                    type: rule.filter ? rule.filter.type : null,
+                    input: rule.filter ? rule.filter.input : null,
+                    operator: rule.operator ? rule.operator.type : null,
+                    value: value
+                };
+
+                if ((rule.filter && rule.filter.data) || rule.data) {
+                    ruleData.data = $.extendext(
+                        true,
+                        "replace",
+                        {},
+                        rule.filter.data,
+                        rule.data
+                    );
                 }
-            }
 
-            /**
-             * Modifies the JSON generated from a Rule object
-             * @event changer:ruleToJson
-             * @memberof QueryBuilder
-             * @param {object} json
-             * @param {Rule} rule
-             * @returns {object}
-             */
-            groupData.rules.push(self.change('ruleToJson', ruleData, rule));
-
-        }, function(model) {
-            var data = parse(model);
-            if (data.rules.length !== 0 || !options.skip_empty) {
-                groupData.rules.push(data);
-            }
-        }, this);
+                if (options.get_flags) {
+                    var flags = self.getRuleFlags(
+                        rule.flags,
+                        options.get_flags === "all"
+                    );
+                    if (!$.isEmptyObject(flags)) {
+                        ruleData.flags = flags;
+                    }
+                }
+
+                /**
+                 * Modifies the JSON generated from a Rule object
+                 * @event changer:ruleToJson
+                 * @memberof QueryBuilder
+                 * @param {object} json
+                 * @param {Rule} rule
+                 * @returns {object}
+                 */
+                
+                var checked = rule.$el.find('[data-show=rule]').prop("checked");
+                $.extend(ruleData, { data: { show: !checked } });
+                groupData.rules.push(self.change("ruleToJson", ruleData, rule));
+            },
+            function(model) {
+                var data = parse(model);
+                if (data.rules.length !== 0 || !options.skip_empty) {
+                    groupData.rules.push(data);
+                }
+            },
+            this
+        );
 
         /**
          * Modifies the JSON generated from a Group object
@@ -307,9 +335,8 @@ QueryBuilder.prototype.getRules = function(options) {
          * @param {Group} group
          * @returns {object}
          */
-        return self.change('groupToJson', groupData, group);
-
-    }(this.model.root));
+        return self.change("groupToJson", groupData, group);
+    })(this.model.root);
 
     out.valid = valid;
 
@@ -320,7 +347,7 @@ QueryBuilder.prototype.getRules = function(options) {
      * @param {object} json
      * @returns {object}
      */
-    return this.change('getRules', out);
+    return this.change("getRules", out);
 };
 
 /**
@@ -335,9 +362,12 @@ QueryBuilder.prototype.getRules = function(options) {
  * @fires QueryBuilder.afterSetRules
  */
 QueryBuilder.prototype.setRules = function(data, options) {
-    options = $.extend({
-        allow_invalid: false
-    }, options);
+    options = $.extend(
+        {
+            allow_invalid: false
+        },
+        options
+    );
 
     if ($.isArray(data)) {
         data = {
@@ -346,8 +376,12 @@ QueryBuilder.prototype.setRules = function(data, options) {
         };
     }
 
-    if (!data || !data.rules || (data.rules.length === 0 && !this.settings.allow_empty)) {
-        Utils.error('RulesParse', 'Incorrect data object passed');
+    if (
+        !data ||
+        !data.rules ||
+        (data.rules.length === 0 && !this.settings.allow_empty)
+    ) {
+        Utils.error("RulesParse", "Incorrect data object passed");
     }
 
     this.clear();
@@ -361,8 +395,7 @@ QueryBuilder.prototype.setRules = function(data, options) {
      * @param {object} options
      * @returns {object}
      */
-    data = this.change('setRules', data, options);
-
+    data = this.change("setRules", data, options);
     var self = this;
 
     (function add(data, group) {
@@ -372,9 +405,13 @@ QueryBuilder.prototype.setRules = function(data, options) {
 
         if (data.condition === undefined) {
             data.condition = self.settings.default_condition;
-        }
-        else if (self.settings.conditions.indexOf(data.condition) == -1) {
-            Utils.error(!options.allow_invalid, 'UndefinedCondition', 'Invalid condition "{0}"', data.condition);
+        } else if (self.settings.conditions.indexOf(data.condition) == -1) {
+            Utils.error(
+                !options.allow_invalid,
+                "UndefinedCondition",
+                'Invalid condition "{0}"',
+                data.condition
+            );
             data.condition = self.settings.default_condition;
         }
 
@@ -384,41 +421,67 @@ QueryBuilder.prototype.setRules = function(data, options) {
             var model;
 
             if (item.rules !== undefined) {
-                if (self.settings.allow_groups !== -1 && self.settings.allow_groups < group.level) {
-                    Utils.error(!options.allow_invalid, 'RulesParse', 'No more than {0} groups are allowed', self.settings.allow_groups);
+                if (
+                    self.settings.allow_groups !== -1 &&
+                    self.settings.allow_groups < group.level
+                ) {
+                    Utils.error(
+                        !options.allow_invalid,
+                        "RulesParse",
+                        "No more than {0} groups are allowed",
+                        self.settings.allow_groups
+                    );
                     self.reset();
-                }
-                else {
-                    model = self.addGroup(group, false, item.data, self.parseGroupFlags(item));
+                } else {
+                    model = self.addGroup(
+                        group,
+                        false,
+                        item.data,
+                        self.parseGroupFlags(item)
+                    );
                     if (model === null) {
                         return;
                     }
 
                     add(item, model);
                 }
-            }
-            else {
+            } else {
                 if (!item.empty) {
                     if (item.id === undefined) {
-                        Utils.error(!options.allow_invalid, 'RulesParse', 'Missing rule field id');
+                        Utils.error(
+                            !options.allow_invalid,
+                            "RulesParse",
+                            "Missing rule field id"
+                        );
                         item.empty = true;
                     }
                     if (item.operator === undefined) {
-                        item.operator = 'equal';
+                        item.operator = "equal";
                     }
                 }
 
-                model = self.addRule(group, item.data, self.parseRuleFlags(item));
+                model = self.addRule(
+                    group,
+                    item.data,
+                    self.parseRuleFlags(item)
+                );
+
                 if (model === null) {
                     return;
                 }
 
                 if (!item.empty) {
-                    model.filter = self.getFilterById(item.id, !options.allow_invalid);
+                    model.filter = self.getFilterById(
+                        item.id,
+                        !options.allow_invalid
+                    );
                 }
 
                 if (model.filter) {
-                    model.operator = self.getOperatorByType(item.operator, !options.allow_invalid);
+                    model.operator = self.getOperatorByType(
+                        item.operator,
+                        !options.allow_invalid
+                    );
 
                     if (!model.operator) {
                         model.operator = self.getOperators(model.filter)[0];
@@ -428,8 +491,7 @@ QueryBuilder.prototype.setRules = function(data, options) {
                 if (model.operator && model.operator.nb_inputs !== 0) {
                     if (item.value !== undefined) {
                         model.value = item.value;
-                    }
-                    else if (model.filter.default_value !== undefined) {
+                    } else if (model.filter.default_value !== undefined) {
                         model.value = model.filter.default_value;
                     }
                 }
@@ -442,8 +504,11 @@ QueryBuilder.prototype.setRules = function(data, options) {
                  * @param {object} json
                  * @returns {Rule} the same rule
                  */
-                if (self.change('jsonToRule', model, item) != model) {
-                    Utils.error('RulesParse', 'Plugin tried to change rule reference');
+                if (self.change("jsonToRule", model, item) != model) {
+                    Utils.error(
+                        "RulesParse",
+                        "Plugin tried to change rule reference"
+                    );
                 }
             }
         });
@@ -456,16 +521,15 @@ QueryBuilder.prototype.setRules = function(data, options) {
          * @param {object} json
          * @returns {Group} the same group
          */
-        if (self.change('jsonToGroup', group, data) != group) {
-            Utils.error('RulesParse', 'Plugin tried to change group reference');
+        if (self.change("jsonToGroup", group, data) != group) {
+            Utils.error("RulesParse", "Plugin tried to change group reference");
         }
-
-    }(data, this.model.root));
+    })(data, this.model.root);
 
     /**
      * After the {@link QueryBuilder#setRules} method
      * @event afterSetRules
      * @memberof QueryBuilder
      */
-    this.trigger('afterSetRules');
+    this.trigger("afterSetRules");
 };
diff --git a/src/template.js b/src/template.js
index 004d4693..a17c5981 100644
--- a/src/template.js
+++ b/src/template.js
@@ -33,13 +33,18 @@ QueryBuilder.templates.group = '\
 </div>';
 
 QueryBuilder.templates.rule = '\
-<div id="{{= it.rule_id }}" class="rule-container"> \
+<div id="{{= it.rule_id }}" class="rule-container" style="{{? !it.is_show && !it.builder.status.design_mode}} display: none; {{?}}"> \
   <div class="rule-header"> \
     <div class="btn-group pull-right rule-actions"> \
       <button type="button" class="btn btn-xs btn-danger" data-delete="rule"> \
         <i class="{{= it.icons.remove_rule }}"></i> {{= it.translate("delete_rule") }} \
       </button> \
     </div> \
+    {{? it.builder.status.design_mode}} \
+    <div class="checkbox checkbox-primary pull-right" style="padding: 0 1% ;"  data-toggle="tooltip" title="Check to hide">\
+      <input type="checkbox" id="show_hide_{{= it.rule_id}}" data-show="rule" {{? !it.is_show}} checked {{?}}><label for="show_hide_{{= it.rule_id}}"></label>\
+    </div>\
+    {{?}}\
   </div> \
   {{? it.settings.display_errors }} \
     <div class="error-container"><i class="{{= it.icons.error }}"></i></div> \
@@ -47,7 +52,8 @@ QueryBuilder.templates.rule = '\
   <div class="rule-filter-container"></div> \
   <div class="rule-operator-container"></div> \
   <div class="rule-value-container"></div> \
-</div>';
+</div>\
+';
 
 QueryBuilder.templates.filterSelect = '\
 {{ var optgroup = null; }} \
@@ -142,15 +148,15 @@ QueryBuilder.prototype.getGroupTemplate = function(group_id, level) {
  * @fires QueryBuilder.changer:getRuleTemplate
  * @private
  */
-QueryBuilder.prototype.getRuleTemplate = function(rule_id) {
+QueryBuilder.prototype.getRuleTemplate = function(rule_id, is_show) {
     var h = this.templates.rule({
         builder: this,
         rule_id: rule_id,
         icons: this.icons,
         settings: this.settings,
-        translate: this.translate.bind(this)
+        translate: this.translate.bind(this),
+        is_show: is_show
     });
-
     /**
      * Modifies the raw HTML of a rule
      * @event changer:getRuleTemplate