v1.15.0 - Add ability to hide side panel for selected items

README.md

@@ -34,6 +34,7 @@ Option name             | Default | Description
 `allowBatchSelection`   | true    | Sections have checkboxes which when checked, check everything within them
 `collapsible`           | true    | Adds collapsibility to sections
 `freeze`                | false   | Disables selection/deselection of options; aka display-only
+`hideSidePanel`         | false   | Hide the right panel showing all the selected items
 `sortable`              | false   | Selected options can be sorted by dragging (requires jQuery UI)
 `sectionDelimiter`      | `/`     | Separator between sections in the select option `data-section` attribute
 `showSectionOnSelected` | true    | Show section name on the selected items

src/jquery.tree-multiselect.css

@@ -29,6 +29,10 @@ div.tree-multiselect > div.selections {
   border-right: solid 2px #D8D8D8;
 }
 
+div.tree-multiselect > div.selections.no-border {
+  border-right: none;
+}
+
 div.tree-multiselect div.section > div.item, div.tree-multiselect div.section > div.section {
   padding-left: 20px;
 }

src/jquery.tree-multiselect.js

@@ -14,7 +14,7 @@
       originalSelect.attr('multiple', '').css('display', 'none');
 
       var uiBuilder = new UiBuilder();
-      uiBuilder.build(originalSelect);
+      uiBuilder.build(originalSelect, options.hideSidePanel);
 
       var selectionContainer = uiBuilder.selections;
 
@@ -44,18 +44,23 @@
   };
 
   var UiBuilder = function() {};
-  UiBuilder.prototype.build = function(el) {
+  UiBuilder.prototype.build = function(el, hideSidePanel) {
     var tree = document.createElement('div');
     tree.className = "tree-multiselect";
     $(el).after(tree);
 
     var selections = document.createElement('div');
     selections.className = "selections";
+    if (hideSidePanel) {
+      selections.className += " no-border";
+    }
     $(tree).append(selections);
 
     var selected = document.createElement('div');
     selected.className = "selected";
-    $(tree).append(selected);
+    if (!hideSidePanel) {
+      $(tree).append(selected);
+    }
 
     this.tree = tree;
     this.selections = selections;
@@ -75,6 +80,7 @@
       sortable: false,
       collapsible: true,
       freeze: false,
+      hideSidePanel: false,
       sectionDelimiter: '/',
       showSectionOnSelected: true,
       startCollapsed: false

test/integration/options.js

@@ -165,3 +165,20 @@ QUnit.test("freeze does not affect other treeMultiselects", function(assert) {
   assert.equal(unfrozenSelection.length, 1);
   assert.equal(unfrozenSelection.find("span.remove-selected").length, 1);
 });
+
+QUnit.test("Selected panel is not removed by default", function(assert) {
+  $("select").append("<option value='one' data-section='test'>One</option>");
+  $("select").treeMultiselect();
+
+  assert.equal($("div.selected").length, 1);
+});
+
+QUnit.test("hideSidePanel removes the selected panel", function(assert) {
+  $("select").append("<option value='one' data-section='test'>One</option>");
+  var options = {
+    hideSidePanel: true
+  };
+  $("select").treeMultiselect(options);
+
+  assert.equal($("div.selected").length, 0);
+});