From 782b8c76087ac7d30f403f979c5d34c68c54665c Mon Sep 17 00:00:00 2001
From: Joris de Ruiter <joris.de.ruiter@kropman.nl>
Date: Fri, 2 May 2014 15:19:11 +0200
Subject: [PATCH 1/5] Added a Toggle button to the palette, to show/hide the
 picker area. Including updated docs and example with new options.

---
 docs/docs.js               |  51 +++++++++++++++++++
 example/index.html         |   2 +
 i18n/jquery.spectrum-nl.js |   2 +
 index.html                 | 101 +++++++++++++++++++++++++++++++++++++
 spectrum.css               |   9 ++++
 spectrum.js                |  24 +++++++++
 6 files changed, 189 insertions(+)

diff --git a/docs/docs.js b/docs/docs.js
index f26def3e..86c9e56f 100644
--- a/docs/docs.js
+++ b/docs/docs.js
@@ -231,6 +231,57 @@ $("#showPaletteOnly").spectrum({
     ]
 });
 
+$("#showPaletteOnlyToggle").spectrum({
+    color: 'blanchedalmond',
+    showPaletteOnly: true,
+    showPaletteOnlyToggle: true,
+    showPalette:true,
+    palette: [
+        ["#000","#444","#666","#999","#ccc","#eee","#f3f3f3","#fff"],
+        ["#f00","#f90","#ff0","#0f0","#0ff","#00f","#90f","#f0f"],
+        ["#f4cccc","#fce5cd","#fff2cc","#d9ead3","#d0e0e3","#cfe2f3","#d9d2e9","#ead1dc"],
+        ["#ea9999","#f9cb9c","#ffe599","#b6d7a8","#a2c4c9","#9fc5e8","#b4a7d6","#d5a6bd"],
+        ["#e06666","#f6b26b","#ffd966","#93c47d","#76a5af","#6fa8dc","#8e7cc3","#c27ba0"],
+        ["#c00","#e69138","#f1c232","#6aa84f","#45818e","#3d85c6","#674ea7","#a64d79"],
+        ["#900","#b45f06","#bf9000","#38761d","#134f5c","#0b5394","#351c75","#741b47"],
+        ["#600","#783f04","#7f6000","#274e13","#0c343d","#073763","#20124d","#4c1130"]
+    ]
+});
+
+$("#toggleText").spectrum({
+    showPaletteOnly: true,
+    showPaletteOnlyToggle: true,
+    toggleText: 'Show picker',
+    color: 'blanchedalmond',
+    palette: [
+        ["#000","#444","#666","#999","#ccc","#eee","#f3f3f3","#fff"],
+        ["#f00","#f90","#ff0","#0f0","#0ff","#00f","#90f","#f0f"],
+        ["#f4cccc","#fce5cd","#fff2cc","#d9ead3","#d0e0e3","#cfe2f3","#d9d2e9","#ead1dc"],
+        ["#ea9999","#f9cb9c","#ffe599","#b6d7a8","#a2c4c9","#9fc5e8","#b4a7d6","#d5a6bd"],
+        ["#e06666","#f6b26b","#ffd966","#93c47d","#76a5af","#6fa8dc","#8e7cc3","#c27ba0"],
+        ["#c00","#e69138","#f1c232","#6aa84f","#45818e","#3d85c6","#674ea7","#a64d79"],
+        ["#900","#b45f06","#bf9000","#38761d","#134f5c","#0b5394","#351c75","#741b47"],
+        ["#600","#783f04","#7f6000","#274e13","#0c343d","#073763","#20124d","#4c1130"]
+    ]
+});
+
+$("#toggleLessText").spectrum({
+    showPalette: true,
+    showPaletteOnlyToggle: true,
+    toggleLessText: 'Hide picker',
+    color: 'blanchedalmond',
+    palette: [
+        ["#000","#444","#666","#999","#ccc","#eee","#f3f3f3","#fff"],
+        ["#f00","#f90","#ff0","#0f0","#0ff","#00f","#90f","#f0f"],
+        ["#f4cccc","#fce5cd","#fff2cc","#d9ead3","#d0e0e3","#cfe2f3","#d9d2e9","#ead1dc"],
+        ["#ea9999","#f9cb9c","#ffe599","#b6d7a8","#a2c4c9","#9fc5e8","#b4a7d6","#d5a6bd"],
+        ["#e06666","#f6b26b","#ffd966","#93c47d","#76a5af","#6fa8dc","#8e7cc3","#c27ba0"],
+        ["#c00","#e69138","#f1c232","#6aa84f","#45818e","#3d85c6","#674ea7","#a64d79"],
+        ["#900","#b45f06","#bf9000","#38761d","#134f5c","#0b5394","#351c75","#741b47"],
+        ["#600","#783f04","#7f6000","#274e13","#0c343d","#073763","#20124d","#4c1130"]
+    ]
+});
+
 $("#clickoutFiresChange").spectrum({
     clickoutFiresChange: true,
     change: updateBorders
diff --git a/example/index.html b/example/index.html
index f02e20a6..96248c49 100644
--- a/example/index.html
+++ b/example/index.html
@@ -85,6 +85,8 @@ <h2>Spectrum Colorpicker Crazy Configurator</h2>
                 <button class='btn toggleBtn' data-rule='showInitial'>Show Initial</button>
                 <button class='btn toggleBtn' data-rule='showAlpha'>Show Alpha</button>
                 <button class='btn toggleBtn' data-rule='showPaletteOnly'>Show Palette Only</button>
+                <button class='btn toggleBtn' data-rule='showPaletteOnlyToggle'>Show Picker Toggle Button</button>
+                <button class='btn toggleBtn' data-rule='showButtons'>Show Buttons</button>
             </div>
             <br />
             <br />
diff --git a/i18n/jquery.spectrum-nl.js b/i18n/jquery.spectrum-nl.js
index d52de204..43a75be7 100644
--- a/i18n/jquery.spectrum-nl.js
+++ b/i18n/jquery.spectrum-nl.js
@@ -8,6 +8,8 @@
         cancelText: "Annuleer",
         chooseText: "Kies",
         clearText: "Wis kleur selectie"
+        toggleText: 'Meer',
+        toggleLessText: 'Minder'
     };
 
     $.extend($.fn.spectrum.defaults, localization);
diff --git a/index.html b/index.html
index e3f44f34..8f0b23dc 100644
--- a/index.html
+++ b/index.html
@@ -195,10 +195,13 @@ <h2 id="options">Options</h2>
     localStorageKey: string,
     showPalette: bool,
     showPaletteOnly: bool,
+    showPaletteOnlyToggle: bool,
     showSelectionPalette: bool,
     clickoutFiresChange: bool,
     cancelText: string,
     chooseText: string,
+    toggleText: string,
+    toggleLessText: string,
     containerClassName: string,
     replacerClassName: string,
     preferredFormat: string,
@@ -361,6 +364,104 @@ <h3 id="options-showPaletteOnly">Show Palette Only</h3>
             </div>
         </div>
 
+        <h3 id="options-showPaletteOnlyToggle">Show Palette Only Toggle</h3>
+        <div class='option-content'>
+            <div class='description'>
+            <p>Spectrum can show a button to toggle the colorpicker next to the palette. This way, the user can choose from a limited number of colors in the palette, but still be able to pick a color that's not in the palette.<br />
+                You can also change the text on the Toggle Button with the options <a href="#options-toggleText">toggleText</a> and <a href="#options-toggleLessText">toggleLessText</a>.</p>
+            </div>
+
+            <pre class='prettyprint'>
+$("#showPaletteOnlyToggle").spectrum({
+    showPaletteOnly: true,
+    showPaletteOnlyToggle: true,
+    color: 'blanchedalmond',
+    palette: [
+        ["#000","#444","#666","#999","#ccc","#eee","#f3f3f3","#fff"],
+        ["#f00","#f90","#ff0","#0f0","#0ff","#00f","#90f","#f0f"],
+        ["#f4cccc","#fce5cd","#fff2cc","#d9ead3","#d0e0e3","#cfe2f3","#d9d2e9","#ead1dc"],
+        ["#ea9999","#f9cb9c","#ffe599","#b6d7a8","#a2c4c9","#9fc5e8","#b4a7d6","#d5a6bd"],
+        ["#e06666","#f6b26b","#ffd966","#93c47d","#76a5af","#6fa8dc","#8e7cc3","#c27ba0"],
+        ["#c00","#e69138","#f1c232","#6aa84f","#45818e","#3d85c6","#674ea7","#a64d79"],
+        ["#900","#b45f06","#bf9000","#38761d","#134f5c","#0b5394","#351c75","#741b47"],
+        ["#600","#783f04","#7f6000","#274e13","#0c343d","#073763","#20124d","#4c1130"]
+    ]
+});
+            </pre>
+            <div class='example'>
+            <span class='label label-result'>
+            Result
+            </span>
+                <input type='text' name='showPaletteOnlyToggle' id='showPaletteOnlyToggle'  />
+            </div>
+        </div>
+
+        <h3 id="options-toggleText">Toggle Text</h3>
+        <div class='option-content'>
+            <div class='description'>
+            <p>You can change the text on the Toggle Button when the picker is hidden with this option.<br />
+                You can also change the text on the Toggle Button to hide the picker with <a href="#options-toggleLessText">toggleLessText</a>.</p>
+            </div>
+
+            <pre class='prettyprint'>
+$("#toggleText").spectrum({
+    showPaletteOnly: true,
+    showPaletteOnlyToggle: true,
+    toggleText: 'Show picker',
+    color: 'blanchedalmond',
+    palette: [
+        ["#000","#444","#666","#999","#ccc","#eee","#f3f3f3","#fff"],
+        ["#f00","#f90","#ff0","#0f0","#0ff","#00f","#90f","#f0f"],
+        ["#f4cccc","#fce5cd","#fff2cc","#d9ead3","#d0e0e3","#cfe2f3","#d9d2e9","#ead1dc"],
+        ["#ea9999","#f9cb9c","#ffe599","#b6d7a8","#a2c4c9","#9fc5e8","#b4a7d6","#d5a6bd"],
+        ["#e06666","#f6b26b","#ffd966","#93c47d","#76a5af","#6fa8dc","#8e7cc3","#c27ba0"],
+        ["#c00","#e69138","#f1c232","#6aa84f","#45818e","#3d85c6","#674ea7","#a64d79"],
+        ["#900","#b45f06","#bf9000","#38761d","#134f5c","#0b5394","#351c75","#741b47"],
+        ["#600","#783f04","#7f6000","#274e13","#0c343d","#073763","#20124d","#4c1130"]
+    ]
+});
+            </pre>
+            <div class='example'>
+            <span class='label label-result'>
+            Result
+            </span>
+                <input type='text' name='toggleText' id='toggleText'  />
+            </div>
+        </div>
+
+        <h3 id="options-toggleLessText">Toggle Less Text</h3>
+        <div class='option-content'>
+            <div class='description'>
+            <p>With this option you can change the text on the Toggle Button when the picker is shown, to hide the picker. If you set this option to FALSE, the text on the button is always toggleText.<br />
+                You can also change the text on the Toggle Button to show the picker with <a href="#options-toggleText">toggleText</a>.</p>
+            </div>
+
+            <pre class='prettyprint'>
+$("#toggleLessText").spectrum({
+    showPalette: true,
+    showPaletteOnlyToggle: true,
+    toggleLessText: 'Hide picker',
+    color: 'blanchedalmond',
+    palette: [
+        ["#000","#444","#666","#999","#ccc","#eee","#f3f3f3","#fff"],
+        ["#f00","#f90","#ff0","#0f0","#0ff","#00f","#90f","#f0f"],
+        ["#f4cccc","#fce5cd","#fff2cc","#d9ead3","#d0e0e3","#cfe2f3","#d9d2e9","#ead1dc"],
+        ["#ea9999","#f9cb9c","#ffe599","#b6d7a8","#a2c4c9","#9fc5e8","#b4a7d6","#d5a6bd"],
+        ["#e06666","#f6b26b","#ffd966","#93c47d","#76a5af","#6fa8dc","#8e7cc3","#c27ba0"],
+        ["#c00","#e69138","#f1c232","#6aa84f","#45818e","#3d85c6","#674ea7","#a64d79"],
+        ["#900","#b45f06","#bf9000","#38761d","#134f5c","#0b5394","#351c75","#741b47"],
+        ["#600","#783f04","#7f6000","#274e13","#0c343d","#073763","#20124d","#4c1130"]
+    ]
+});
+            </pre>
+            <div class='example'>
+            <span class='label label-result'>
+            Result
+            </span>
+                <input type='text' name='toggleLessText' id='toggleLessText'  />
+            </div>
+        </div>
+
         <h3 id="options-showSelectionPalette">Show Selection Palette</h3>
         <div class='option-content'>
             <div class='description'>
diff --git a/spectrum.css b/spectrum.css
index 6a83b725..50de8e80 100644
--- a/spectrum.css
+++ b/spectrum.css
@@ -134,6 +134,9 @@ License: MIT
 .sp-container.sp-buttons-disabled .sp-button-container {
     display: none;
 }
+.sp-container.sp-palette-buttons-disabled .sp-palette-button-container {
+    display: none;
+}
 .sp-palette-only .sp-picker-container {
     display: none;
 }
@@ -319,6 +322,11 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
     border-right: solid 1px #ccc;
 }
 
+.sp-palette-only .sp-palette-container
+{
+    border: 0;
+}
+
 .sp-palette .sp-thumb-el {
     display: block;
     position:relative;
@@ -357,6 +365,7 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
 }
 
 /* Buttons */
+.sp-palette-button-container,
 .sp-button-container {
     float: right;
 }
diff --git a/spectrum.js b/spectrum.js
index 8ced40ae..467a90f3 100644
--- a/spectrum.js
+++ b/spectrum.js
@@ -23,12 +23,15 @@
         showInitial: false,
         showPalette: false,
         showPaletteOnly: false,
+        showPaletteOnlyToggle: false,
         showSelectionPalette: true,
         localStorageKey: false,
         appendTo: "body",
         maxSelectionSize: 7,
         cancelText: "cancel",
         chooseText: "choose",
+        toggleText: "more",
+        toggleLessText: "less",
         clearText: "Clear Color Selection",
         preferredFormat: false,
         className: "", // Deprecated - use containerClassName and replacerClassName instead.
@@ -77,6 +80,9 @@
             "<div class='sp-container sp-hidden'>",
                 "<div class='sp-palette-container'>",
                     "<div class='sp-palette sp-thumb sp-cf'></div>",
+                    "<div class='sp-palette-button-container sp-cf'>",
+                        "<button type='button' class='sp-palette-toggle'></button>",
+                    "</div>",
                 "</div>",
                 "<div class='sp-picker-container'>",
                     "<div class='sp-top sp-cf'>",
@@ -187,6 +193,7 @@
             boundElement = $(element),
             disabled = false,
             container = $(markup, doc).addClass(theme),
+            pickerContainer = container.find(".sp-picker-container"),
             dragger = container.find(".sp-color"),
             dragHelper = container.find(".sp-dragger"),
             slider = container.find(".sp-hue"),
@@ -200,6 +207,7 @@
             cancelButton = container.find(".sp-cancel"),
             clearButton = container.find(".sp-clear"),
             chooseButton = container.find(".sp-choose"),
+            toggleButton = container.find(".sp-palette-toggle"),
             isInput = boundElement.is("input"),
             isInputTypeColor = isInput && inputTypeColorSupport && boundElement.attr("type") === "color",
             shouldReplace = isInput && !flat,
@@ -220,6 +228,8 @@
                 opts.showPalette = true;
             }
 
+            toggleButton.text((!opts.showPaletteOnly && typeof opts.toggleLessText == 'string') ? opts.toggleLessText : opts.toggleText);
+
             if (opts.palette) {
                 palette = opts.palette.slice(0);
                 paletteArray = $.isArray(palette[0]) ? palette : [palette];
@@ -237,6 +247,7 @@
             container.toggleClass("sp-alpha-enabled", opts.showAlpha);
             container.toggleClass("sp-clear-enabled", allowEmpty);
             container.toggleClass("sp-buttons-disabled", !opts.showButtons);
+            container.toggleClass("sp-palette-buttons-disabled", !opts.showPaletteOnlyToggle);
             container.toggleClass("sp-palette-disabled", !opts.showPalette);
             container.toggleClass("sp-palette-only", opts.showPaletteOnly);
             container.toggleClass("sp-initial-disabled", !opts.showInitial);
@@ -333,6 +344,19 @@
                 }
             });
 
+            toggleButton.text((!opts.showPaletteOnly && typeof opts.toggleLessText == 'string') ? opts.toggleLessText : opts.toggleText);
+            toggleButton.bind("click.spectrum", function (e) {
+                e.stopPropagation();
+                e.preventDefault();
+
+                opts.showPaletteOnly = !opts.showPaletteOnly;
+                if (!opts.showPaletteOnly && !flat) {
+                    container.css('left', '-=' + (pickerContainer.outerWidth(true) + 5));
+                }
+
+                applyOptions()
+            });
+
             draggable(alphaSlider, function (dragX, dragY, e) {
                 currentAlpha = (dragX / alphaWidth);
                 isEmpty = false;

From c28b08127a866a5b592d66a9e2e6c9fa70f6cbcb Mon Sep 17 00:00:00 2001
From: Joris de Ruiter <joris.de.ruiter@kropman.nl>
Date: Tue, 6 May 2014 15:06:40 +0200
Subject: [PATCH 2/5] Bugfix: Forgot one semicolon.

---
 spectrum.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/spectrum.js b/spectrum.js
index 467a90f3..e0a68e84 100644
--- a/spectrum.js
+++ b/spectrum.js
@@ -354,7 +354,7 @@
                     container.css('left', '-=' + (pickerContainer.outerWidth(true) + 5));
                 }
 
-                applyOptions()
+                applyOptions();
             });
 
             draggable(alphaSlider, function (dragX, dragY, e) {

From 91e5f83bc9168d8c1e690b91328e2e1ece5f2c2c Mon Sep 17 00:00:00 2001
From: Joris de Ruiter <joris.de.ruiter@kropman.nl>
Date: Fri, 20 Jun 2014 13:26:23 +0200
Subject: [PATCH 3/5] Several changes after comments from bgrins. WARNING:
 option variable changed

- Changed showPaletteOnlyToggle to togglePaletteOnly (be sure to change it everywhere you used it).
- Removed test for toggleLessText to be a string, this fixes a bug and improves readability.
- Cleaned up CSS -> open brackets on the same line as the selector.
- Cleaned up de docs -> removed separate toggleText and toggleLessText topics and added some extra text to togglePaletteOnly.
---
 docs/docs.js       | 38 ++--------------------
 example/index.html |  2 +-
 index.html         | 81 ++++++----------------------------------------
 spectrum.css       | 66 +++++++++++++------------------------
 spectrum.js        |  8 ++---
 5 files changed, 38 insertions(+), 157 deletions(-)

diff --git a/docs/docs.js b/docs/docs.js
index 86c9e56f..b4a22cbc 100644
--- a/docs/docs.js
+++ b/docs/docs.js
@@ -231,10 +231,10 @@ $("#showPaletteOnly").spectrum({
     ]
 });
 
-$("#showPaletteOnlyToggle").spectrum({
+$("#togglePaletteOnly").spectrum({
     color: 'blanchedalmond',
     showPaletteOnly: true,
-    showPaletteOnlyToggle: true,
+    togglePaletteOnly: true,
     showPalette:true,
     palette: [
         ["#000","#444","#666","#999","#ccc","#eee","#f3f3f3","#fff"],
@@ -248,40 +248,6 @@ $("#showPaletteOnlyToggle").spectrum({
     ]
 });
 
-$("#toggleText").spectrum({
-    showPaletteOnly: true,
-    showPaletteOnlyToggle: true,
-    toggleText: 'Show picker',
-    color: 'blanchedalmond',
-    palette: [
-        ["#000","#444","#666","#999","#ccc","#eee","#f3f3f3","#fff"],
-        ["#f00","#f90","#ff0","#0f0","#0ff","#00f","#90f","#f0f"],
-        ["#f4cccc","#fce5cd","#fff2cc","#d9ead3","#d0e0e3","#cfe2f3","#d9d2e9","#ead1dc"],
-        ["#ea9999","#f9cb9c","#ffe599","#b6d7a8","#a2c4c9","#9fc5e8","#b4a7d6","#d5a6bd"],
-        ["#e06666","#f6b26b","#ffd966","#93c47d","#76a5af","#6fa8dc","#8e7cc3","#c27ba0"],
-        ["#c00","#e69138","#f1c232","#6aa84f","#45818e","#3d85c6","#674ea7","#a64d79"],
-        ["#900","#b45f06","#bf9000","#38761d","#134f5c","#0b5394","#351c75","#741b47"],
-        ["#600","#783f04","#7f6000","#274e13","#0c343d","#073763","#20124d","#4c1130"]
-    ]
-});
-
-$("#toggleLessText").spectrum({
-    showPalette: true,
-    showPaletteOnlyToggle: true,
-    toggleLessText: 'Hide picker',
-    color: 'blanchedalmond',
-    palette: [
-        ["#000","#444","#666","#999","#ccc","#eee","#f3f3f3","#fff"],
-        ["#f00","#f90","#ff0","#0f0","#0ff","#00f","#90f","#f0f"],
-        ["#f4cccc","#fce5cd","#fff2cc","#d9ead3","#d0e0e3","#cfe2f3","#d9d2e9","#ead1dc"],
-        ["#ea9999","#f9cb9c","#ffe599","#b6d7a8","#a2c4c9","#9fc5e8","#b4a7d6","#d5a6bd"],
-        ["#e06666","#f6b26b","#ffd966","#93c47d","#76a5af","#6fa8dc","#8e7cc3","#c27ba0"],
-        ["#c00","#e69138","#f1c232","#6aa84f","#45818e","#3d85c6","#674ea7","#a64d79"],
-        ["#900","#b45f06","#bf9000","#38761d","#134f5c","#0b5394","#351c75","#741b47"],
-        ["#600","#783f04","#7f6000","#274e13","#0c343d","#073763","#20124d","#4c1130"]
-    ]
-});
-
 $("#clickoutFiresChange").spectrum({
     clickoutFiresChange: true,
     change: updateBorders
diff --git a/example/index.html b/example/index.html
index 96248c49..1e54a249 100644
--- a/example/index.html
+++ b/example/index.html
@@ -85,7 +85,7 @@ <h2>Spectrum Colorpicker Crazy Configurator</h2>
                 <button class='btn toggleBtn' data-rule='showInitial'>Show Initial</button>
                 <button class='btn toggleBtn' data-rule='showAlpha'>Show Alpha</button>
                 <button class='btn toggleBtn' data-rule='showPaletteOnly'>Show Palette Only</button>
-                <button class='btn toggleBtn' data-rule='showPaletteOnlyToggle'>Show Picker Toggle Button</button>
+                <button class='btn toggleBtn' data-rule='togglePaletteOnly'>Show Picker Toggle Button</button>
                 <button class='btn toggleBtn' data-rule='showButtons'>Show Buttons</button>
             </div>
             <br />
diff --git a/index.html b/index.html
index 8f0b23dc..dc9d0453 100644
--- a/index.html
+++ b/index.html
@@ -195,7 +195,7 @@ <h2 id="options">Options</h2>
     localStorageKey: string,
     showPalette: bool,
     showPaletteOnly: bool,
-    showPaletteOnlyToggle: bool,
+    togglePaletteOnly: bool,
     showSelectionPalette: bool,
     clickoutFiresChange: bool,
     cancelText: string,
@@ -364,17 +364,20 @@ <h3 id="options-showPaletteOnly">Show Palette Only</h3>
             </div>
         </div>
 
-        <h3 id="options-showPaletteOnlyToggle">Show Palette Only Toggle</h3>
+        <h3 id="options-togglePaletteOnly">Toggle Palette Only</h3>
         <div class='option-content'>
             <div class='description'>
             <p>Spectrum can show a button to toggle the colorpicker next to the palette. This way, the user can choose from a limited number of colors in the palette, but still be able to pick a color that's not in the palette.<br />
-                You can also change the text on the Toggle Button with the options <a href="#options-toggleText">toggleText</a> and <a href="#options-toggleLessText">toggleLessText</a>.</p>
+                The default value for <code>togglePaletteOnly</code> is FALSE. Set it to TRUE to enable the Toggle button.<br /><br />
+                You can also change the text on the Toggle Button with the options <code>toggleText</code> (default is "more") and <code>toggleLessText</code> (default is "less").</p>
             </div>
 
             <pre class='prettyprint'>
-$("#showPaletteOnlyToggle").spectrum({
+$("#togglePaletteOnly").spectrum({
     showPaletteOnly: true,
-    showPaletteOnlyToggle: true,
+    togglePaletteOnly: true,
+    toggleText: 'more',
+    toggleLessText: 'less',
     color: 'blanchedalmond',
     palette: [
         ["#000","#444","#666","#999","#ccc","#eee","#f3f3f3","#fff"],
@@ -392,73 +395,7 @@ <h3 id="options-showPaletteOnlyToggle">Show Palette Only Toggle</h3>
             <span class='label label-result'>
             Result
             </span>
-                <input type='text' name='showPaletteOnlyToggle' id='showPaletteOnlyToggle'  />
-            </div>
-        </div>
-
-        <h3 id="options-toggleText">Toggle Text</h3>
-        <div class='option-content'>
-            <div class='description'>
-            <p>You can change the text on the Toggle Button when the picker is hidden with this option.<br />
-                You can also change the text on the Toggle Button to hide the picker with <a href="#options-toggleLessText">toggleLessText</a>.</p>
-            </div>
-
-            <pre class='prettyprint'>
-$("#toggleText").spectrum({
-    showPaletteOnly: true,
-    showPaletteOnlyToggle: true,
-    toggleText: 'Show picker',
-    color: 'blanchedalmond',
-    palette: [
-        ["#000","#444","#666","#999","#ccc","#eee","#f3f3f3","#fff"],
-        ["#f00","#f90","#ff0","#0f0","#0ff","#00f","#90f","#f0f"],
-        ["#f4cccc","#fce5cd","#fff2cc","#d9ead3","#d0e0e3","#cfe2f3","#d9d2e9","#ead1dc"],
-        ["#ea9999","#f9cb9c","#ffe599","#b6d7a8","#a2c4c9","#9fc5e8","#b4a7d6","#d5a6bd"],
-        ["#e06666","#f6b26b","#ffd966","#93c47d","#76a5af","#6fa8dc","#8e7cc3","#c27ba0"],
-        ["#c00","#e69138","#f1c232","#6aa84f","#45818e","#3d85c6","#674ea7","#a64d79"],
-        ["#900","#b45f06","#bf9000","#38761d","#134f5c","#0b5394","#351c75","#741b47"],
-        ["#600","#783f04","#7f6000","#274e13","#0c343d","#073763","#20124d","#4c1130"]
-    ]
-});
-            </pre>
-            <div class='example'>
-            <span class='label label-result'>
-            Result
-            </span>
-                <input type='text' name='toggleText' id='toggleText'  />
-            </div>
-        </div>
-
-        <h3 id="options-toggleLessText">Toggle Less Text</h3>
-        <div class='option-content'>
-            <div class='description'>
-            <p>With this option you can change the text on the Toggle Button when the picker is shown, to hide the picker. If you set this option to FALSE, the text on the button is always toggleText.<br />
-                You can also change the text on the Toggle Button to show the picker with <a href="#options-toggleText">toggleText</a>.</p>
-            </div>
-
-            <pre class='prettyprint'>
-$("#toggleLessText").spectrum({
-    showPalette: true,
-    showPaletteOnlyToggle: true,
-    toggleLessText: 'Hide picker',
-    color: 'blanchedalmond',
-    palette: [
-        ["#000","#444","#666","#999","#ccc","#eee","#f3f3f3","#fff"],
-        ["#f00","#f90","#ff0","#0f0","#0ff","#00f","#90f","#f0f"],
-        ["#f4cccc","#fce5cd","#fff2cc","#d9ead3","#d0e0e3","#cfe2f3","#d9d2e9","#ead1dc"],
-        ["#ea9999","#f9cb9c","#ffe599","#b6d7a8","#a2c4c9","#9fc5e8","#b4a7d6","#d5a6bd"],
-        ["#e06666","#f6b26b","#ffd966","#93c47d","#76a5af","#6fa8dc","#8e7cc3","#c27ba0"],
-        ["#c00","#e69138","#f1c232","#6aa84f","#45818e","#3d85c6","#674ea7","#a64d79"],
-        ["#900","#b45f06","#bf9000","#38761d","#134f5c","#0b5394","#351c75","#741b47"],
-        ["#600","#783f04","#7f6000","#274e13","#0c343d","#073763","#20124d","#4c1130"]
-    ]
-});
-            </pre>
-            <div class='example'>
-            <span class='label label-result'>
-            Result
-            </span>
-                <input type='text' name='toggleLessText' id='toggleLessText'  />
+                <input type='text' name='togglePaletteOnly' id='togglePaletteOnly'  />
             </div>
         </div>
 
diff --git a/spectrum.css b/spectrum.css
index 50de8e80..bf58c119 100644
--- a/spectrum.css
+++ b/spectrum.css
@@ -258,20 +258,17 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
     border: solid 1px #f0c49B;
     padding: 0;
 }
-.sp-container, .sp-container button, .sp-container input, .sp-color, .sp-hue, .sp-clear
-{
+.sp-container, .sp-container button, .sp-container input, .sp-color, .sp-hue, .sp-clear {
     font: normal 12px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     -ms-box-sizing: border-box;
     box-sizing: border-box;
 }
-.sp-top
-{
+.sp-top {
     margin-bottom: 3px;
 }
-.sp-color, .sp-hue, .sp-clear
-{
+.sp-color, .sp-hue, .sp-clear {
     border: solid 1px #666;
 }
 
@@ -297,33 +294,28 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
 .sp-input:focus  {
     border: 1px solid orange;
 }
-.sp-input.sp-validation-error
-{
+.sp-input.sp-validation-error {
     border: 1px solid red;
     background: #fdd;
 }
-.sp-picker-container , .sp-palette-container
-{
+.sp-picker-container , .sp-palette-container {
     float:left;
     position: relative;
     padding: 10px;
     padding-bottom: 300px;
     margin-bottom: -290px;
 }
-.sp-picker-container
-{
+.sp-picker-container {
     width: 172px;
     border-left: solid 1px #fff;
 }
 
 /* Palettes */
-.sp-palette-container
-{
+.sp-palette-container {
     border-right: solid 1px #ccc;
 }
 
-.sp-palette-only .sp-palette-container
-{
+.sp-palette-only .sp-palette-container {
     border: 0;
 }
 
@@ -340,14 +332,12 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
 .sp-palette .sp-thumb-el:hover, .sp-palette .sp-thumb-el.sp-thumb-active {
     border-color: orange;
 }
-.sp-thumb-el
-{
+.sp-thumb-el {
     position:relative;
 }
 
 /* Initial */
-.sp-initial
-{
+.sp-initial {
     float: left;
     border: solid 1px #333;
 }
@@ -400,8 +390,7 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
     float:left;
     font-size:10px;
 }
-.sp-preview
-{
+.sp-preview {
     position:relative;
     width:25px;
     height: 20px;
@@ -411,21 +400,18 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
     z-index: 0;
 }
 
-.sp-palette
-{
+.sp-palette {
     *width: 220px;
     max-width: 220px;
 }
-.sp-palette .sp-thumb-el
-{
+.sp-palette .sp-thumb-el {
     width:16px;
     height: 16px;
     margin:2px 1px;
     border: solid 1px #d0d0d0;
 }
 
-.sp-container
-{
+.sp-container {
     padding-bottom:0;
 }
 
@@ -470,8 +456,7 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
     -o-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
     box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
 }
-.sp-cancel
-{
+.sp-cancel {
     font-size: 11px;
     color: #d93f3f !important;
     margin:0;
@@ -481,43 +466,36 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
     text-decoration:none;
 
 }
-.sp-cancel:hover
-{
+.sp-cancel:hover {
     color: #d93f3f !important;
     text-decoration: underline;
 }
 
 
-.sp-palette span:hover, .sp-palette span.sp-thumb-active
-{
+.sp-palette span:hover, .sp-palette span.sp-thumb-active {
     border-color: #000;
 }
 
-.sp-preview, .sp-alpha, .sp-thumb-el
-{
+.sp-preview, .sp-alpha, .sp-thumb-el {
     position:relative;
     background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
 }
-.sp-preview-inner, .sp-alpha-inner, .sp-thumb-inner
-{
+.sp-preview-inner, .sp-alpha-inner, .sp-thumb-inner {
     display:block;
     position:absolute;
     top:0;left:0;bottom:0;right:0;
 }
 
-.sp-palette .sp-thumb-inner
-{
+.sp-palette .sp-thumb-inner {
     background-position: 50% 50%;
     background-repeat: no-repeat;
 }
 
-.sp-palette .sp-thumb-light.sp-thumb-active .sp-thumb-inner
-{
+.sp-palette .sp-thumb-light.sp-thumb-active .sp-thumb-inner {
     background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIVJREFUeNpiYBhsgJFMffxAXABlN5JruT4Q3wfi/0DsT64h8UD8HmpIPCWG/KemIfOJCUB+Aoacx6EGBZyHBqI+WsDCwuQ9mhxeg2A210Ntfo8klk9sOMijaURm7yc1UP2RNCMbKE9ODK1HM6iegYLkfx8pligC9lCD7KmRof0ZhjQACDAAceovrtpVBRkAAAAASUVORK5CYII=);
 }
 
-.sp-palette .sp-thumb-dark.sp-thumb-active .sp-thumb-inner
-{
+.sp-palette .sp-thumb-dark.sp-thumb-active .sp-thumb-inner {
     background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAMdJREFUOE+tkgsNwzAMRMugEAahEAahEAZhEAqlEAZhEAohEAYh81X2dIm8fKpEspLGvudPOsUYpxE2BIJCroJmEW9qJ+MKaBFhEMNabSy9oIcIPwrB+afvAUFoK4H0tMaQ3XtlrggDhOVVMuT4E5MMG0FBbCEYzjYT7OxLEvIHQLY2zWwQ3D+9luyOQTfKDiFD3iUIfPk8VqrKjgAiSfGFPecrg6HN6m/iBcwiDAo7WiBeawa+Kwh7tZoSCGLMqwlSAzVDhoK+6vH4G0P5wdkAAAAASUVORK5CYII=);
 }
 
diff --git a/spectrum.js b/spectrum.js
index e0a68e84..7939d6d9 100644
--- a/spectrum.js
+++ b/spectrum.js
@@ -23,7 +23,7 @@
         showInitial: false,
         showPalette: false,
         showPaletteOnly: false,
-        showPaletteOnlyToggle: false,
+        togglePaletteOnly: false,
         showSelectionPalette: true,
         localStorageKey: false,
         appendTo: "body",
@@ -228,7 +228,7 @@
                 opts.showPalette = true;
             }
 
-            toggleButton.text((!opts.showPaletteOnly && typeof opts.toggleLessText == 'string') ? opts.toggleLessText : opts.toggleText);
+            toggleButton.text(opts.showPaletteOnly ? opts.toggleText : opts.toggleLessText);
 
             if (opts.palette) {
                 palette = opts.palette.slice(0);
@@ -247,7 +247,7 @@
             container.toggleClass("sp-alpha-enabled", opts.showAlpha);
             container.toggleClass("sp-clear-enabled", allowEmpty);
             container.toggleClass("sp-buttons-disabled", !opts.showButtons);
-            container.toggleClass("sp-palette-buttons-disabled", !opts.showPaletteOnlyToggle);
+            container.toggleClass("sp-palette-buttons-disabled", !opts.togglePaletteOnly);
             container.toggleClass("sp-palette-disabled", !opts.showPalette);
             container.toggleClass("sp-palette-only", opts.showPaletteOnly);
             container.toggleClass("sp-initial-disabled", !opts.showInitial);
@@ -344,7 +344,7 @@
                 }
             });
 
-            toggleButton.text((!opts.showPaletteOnly && typeof opts.toggleLessText == 'string') ? opts.toggleLessText : opts.toggleText);
+            toggleButton.text(opts.showPaletteOnly ? opts.toggleText : opts.toggleLessText);
             toggleButton.bind("click.spectrum", function (e) {
                 e.stopPropagation();
                 e.preventDefault();

From 0642c0611ebc7a0a804d7684d0cf7b2d0e10fb09 Mon Sep 17 00:00:00 2001
From: Joris de Ruiter <joris.de.ruiter@kropman.nl>
Date: Fri, 4 Jul 2014 09:10:23 +0200
Subject: [PATCH 4/5] Added comment for explaining moving the palette to the
 left. Added Unit-test for the Toggle Button.

---
 spectrum.js     |  7 ++++++-
 test/index.html |  1 +
 test/tests.js   | 39 +++++++++++++++++++++++++++++++++++++++
 3 files changed, 46 insertions(+), 1 deletion(-)

diff --git a/spectrum.js b/spectrum.js
index 7939d6d9..59a724a5 100644
--- a/spectrum.js
+++ b/spectrum.js
@@ -350,10 +350,15 @@
                 e.preventDefault();
 
                 opts.showPaletteOnly = !opts.showPaletteOnly;
+				
+				// To make sure the Picker area is drawn on the right, next to the
+				// Palette area (and not below the palette), first move the Palette
+				// to the left to make space for the picker, plus 5px extra.
+				// The 'applyOptions' function puts the whole container back into place
+				// and takes care of the button-text and the sp-palette-only CSS class.
                 if (!opts.showPaletteOnly && !flat) {
                     container.css('left', '-=' + (pickerContainer.outerWidth(true) + 5));
                 }
-
                 applyOptions();
             });
 
diff --git a/test/index.html b/test/index.html
index b38da88e..a61ea35c 100644
--- a/test/index.html
+++ b/test/index.html
@@ -4,6 +4,7 @@
   <meta charset="utf-8">
   <title>Spectrum Tests</title>
   <link rel="stylesheet" href="qunit.css">
+  <link rel="stylesheet" href="../spectrum.css">
 </head>
 <body>
   <div id="qunit"></div>
diff --git a/test/tests.js b/test/tests.js
index 1627f336..e4e86402 100644
--- a/test/tests.js
+++ b/test/tests.js
@@ -312,6 +312,45 @@ test ("Show Input works as expected", function() {
   el.spectrum("destroy");
 });
 
+test ("Toggle Picker Area button works as expected", function() {
+  var div = $("<div style='position:absolute; right:0; height:20px; width:150px'>").appendTo('body').show(),
+      el = $("<input />").appendTo(div);
+  el.spectrum({
+    showInput: true,
+	showPaletteOnly: true,
+    togglePaletteOnly: true,
+    color: "red"
+  });
+  
+  var spectrum = el.spectrum("container").show(),
+      toggle = spectrum.find(".sp-palette-toggle"),
+      picker = spectrum.find(".sp-picker-container"),
+      palette = spectrum.find(".sp-palette-container");
+  
+  // Open the Colorpicker
+  el.spectrum("show");
+  equal(picker.is(":hidden"), true, "The picker area is hidden by default.");
+  ok(spectrum.hasClass("sp-palette-only"), "The 'palette-only' class is enabled.");
+  
+  // Click the Picker area Toggle button to show the Picker
+  toggle.click();
+
+  equal(picker.is(":hidden"), false, "After toggling, the picker area is visible.");
+  ok(!spectrum.hasClass("sp-palette-only"), "The 'palette-only' class is disabled.");
+  equal(Math.round(picker.offset().top), Math.round(palette.offset().top), "The picker area is next to the palette.");
+  
+  // Click the toggle again to hide the picker
+  toggle.trigger("click");
+  
+  equal(picker.is(":hidden"), true, "After toggling again, the picker area is hidden.");
+  ok(spectrum.hasClass("sp-palette-only"), "And the 'palette-only' class is enabled.");
+  
+  // Cleanup
+  el.spectrum("hide");
+  el.spectrum("destroy");
+  el.remove();
+  div.remove();
+});
 
 test ("Tooltip is formatted based on preferred format", function() {
   var el = $("<input />").spectrum({

From 30b66231ec6241c087399bd4b6f0614f70f9a61e Mon Sep 17 00:00:00 2001
From: Joris de Ruiter <joris.de.ruiter@kropman.nl>
Date: Tue, 8 Jul 2014 15:58:35 +0200
Subject: [PATCH 5/5] Changed text-options to 'togglePaletteMoreText' and
 'togglePaletteLessText'. Fixed some tabs/spaces.

---
 i18n/jquery.spectrum-nl.js |  4 ++--
 index.html                 | 10 +++++-----
 spectrum.js                | 20 ++++++++++----------
 3 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/i18n/jquery.spectrum-nl.js b/i18n/jquery.spectrum-nl.js
index 43a75be7..a892e486 100644
--- a/i18n/jquery.spectrum-nl.js
+++ b/i18n/jquery.spectrum-nl.js
@@ -8,8 +8,8 @@
         cancelText: "Annuleer",
         chooseText: "Kies",
         clearText: "Wis kleur selectie"
-        toggleText: 'Meer',
-        toggleLessText: 'Minder'
+        togglePaletteMoreText: 'Meer',
+        togglePaletteLessText: 'Minder'
     };
 
     $.extend($.fn.spectrum.defaults, localization);
diff --git a/index.html b/index.html
index dc9d0453..ebe311b9 100644
--- a/index.html
+++ b/index.html
@@ -200,8 +200,8 @@ <h2 id="options">Options</h2>
     clickoutFiresChange: bool,
     cancelText: string,
     chooseText: string,
-    toggleText: string,
-    toggleLessText: string,
+    togglePaletteMoreText: string,
+    togglePaletteLessText: string,
     containerClassName: string,
     replacerClassName: string,
     preferredFormat: string,
@@ -369,15 +369,15 @@ <h3 id="options-togglePaletteOnly">Toggle Palette Only</h3>
             <div class='description'>
             <p>Spectrum can show a button to toggle the colorpicker next to the palette. This way, the user can choose from a limited number of colors in the palette, but still be able to pick a color that's not in the palette.<br />
                 The default value for <code>togglePaletteOnly</code> is FALSE. Set it to TRUE to enable the Toggle button.<br /><br />
-                You can also change the text on the Toggle Button with the options <code>toggleText</code> (default is "more") and <code>toggleLessText</code> (default is "less").</p>
+                You can also change the text on the Toggle Button with the options <code>togglePaletteMoreText</code> (default is "more") and <code>togglePaletteLessText</code> (default is "less").</p>
             </div>
 
             <pre class='prettyprint'>
 $("#togglePaletteOnly").spectrum({
     showPaletteOnly: true,
     togglePaletteOnly: true,
-    toggleText: 'more',
-    toggleLessText: 'less',
+    togglePaletteMoreText: 'more',
+    togglePaletteLessText: 'less',
     color: 'blanchedalmond',
     palette: [
         ["#000","#444","#666","#999","#ccc","#eee","#f3f3f3","#fff"],
diff --git a/spectrum.js b/spectrum.js
index 59a724a5..b5e3996f 100644
--- a/spectrum.js
+++ b/spectrum.js
@@ -30,8 +30,8 @@
         maxSelectionSize: 7,
         cancelText: "cancel",
         chooseText: "choose",
-        toggleText: "more",
-        toggleLessText: "less",
+        togglePaletteMoreText: "more",
+        togglePaletteLessText: "less",
         clearText: "Clear Color Selection",
         preferredFormat: false,
         className: "", // Deprecated - use containerClassName and replacerClassName instead.
@@ -228,7 +228,7 @@
                 opts.showPalette = true;
             }
 
-            toggleButton.text(opts.showPaletteOnly ? opts.toggleText : opts.toggleLessText);
+            toggleButton.text(opts.showPaletteOnly ? opts.togglePaletteMoreText : opts.togglePaletteLessText);
 
             if (opts.palette) {
                 palette = opts.palette.slice(0);
@@ -344,18 +344,18 @@
                 }
             });
 
-            toggleButton.text(opts.showPaletteOnly ? opts.toggleText : opts.toggleLessText);
+            toggleButton.text(opts.showPaletteOnly ? opts.togglePaletteMoreText : opts.togglePaletteLessText);
             toggleButton.bind("click.spectrum", function (e) {
                 e.stopPropagation();
                 e.preventDefault();
 
                 opts.showPaletteOnly = !opts.showPaletteOnly;
-				
-				// To make sure the Picker area is drawn on the right, next to the
-				// Palette area (and not below the palette), first move the Palette
-				// to the left to make space for the picker, plus 5px extra.
-				// The 'applyOptions' function puts the whole container back into place
-				// and takes care of the button-text and the sp-palette-only CSS class.
+
+                // To make sure the Picker area is drawn on the right, next to the
+                // Palette area (and not below the palette), first move the Palette
+                // to the left to make space for the picker, plus 5px extra.
+                // The 'applyOptions' function puts the whole container back into place
+                // and takes care of the button-text and the sp-palette-only CSS class.
                 if (!opts.showPaletteOnly && !flat) {
                     container.css('left', '-=' + (pickerContainer.outerWidth(true) + 5));
                 }