Merge branch 'master' of github.com:jonobr1/gui-dat

demo/demo.css

@@ -49,14 +49,14 @@ h2 {
 }
 
 h2.section { 
-margin: 0;
-padding: 20px 0 20px;
-cursor: pointer;
-border-top: 1px dotted #ccc;
--webkit-transition: color 0.15s linear;
+	margin: 0;
+	padding: 20px 0px 0px 0px;
+	cursor: pointer;
+	border-top: 1px dotted #ccc;
+	-webkit-transition: color 0.15s linear;
 }
 h2.section:hover { 
-color: #00aeff;
+	color: #00aeff;
 }
 
 div.collapsed h2, div.expanded h2 { 
@@ -67,6 +67,13 @@ div.collapsed h2, div.expanded h2 {
 	cursor: pointer;
 }
 
+div.trans {
+	border-top: 1px dotted #ccc;
+	margin: 0px 0px 20px 0px;
+}
+ol#secrets {
+	padding: 0px 0px 20px 0px;
+}
 div.expanded h2:before {
 	content: '-';
 }
@@ -83,16 +90,25 @@ div.expanded h2:before, div.collapsed h2:before {
 	font-family: Monaco, monospace;
 }
 
+div.collapsable {
+	overflow: hidden;
+	clear: both;
+	margin-bottom: 20px;
+	-moz-transition: height .2s ease-out;
+	-webkit-transition: height .2s ease-out;
+	transition: height .2s ease-out;
+}
+
+div.collapsable div {
+	height: auto;
+}
+
 div.collapsed .collapsable {
 	overflow: hidden;
 	clear: both;
 	height: 0;
 }
-div.expanded .collapsable {
-	overflow: hidden;
-	clear: both;
-	height: auto;
-}
+
 div.expanded { cursor: pointer; }
 
 #helvetica-demo {

gui.css

@@ -100,7 +100,7 @@ a.guidat-toggle:hover {
 	border: 0;
 	color: #1ed36f;
 	margin-right: 2px;
-width: 148px;
+	width: 148px;
 }
 
 .guidat-controller.boolean { 

index.html

@@ -62,10 +62,15 @@
 
 				function toggle(e) {
 					
-					if(this.className == 'collapsed') {
+					var collapsable = this.childNodes[3],
+						wrapper = collapsable.childNodes[1];
+					
+					if (this.className === 'collapsed') {
 						this.className = 'expanded';
+						collapsable.style.height = wrapper.clientHeight + 'px';
 					} else {
 						this.className = 'collapsed';
+						collapsable.style.height = '0px';
 					}
 				}
 				
@@ -176,16 +181,18 @@ window.onload = function() {
 	<div class="collapsed">
 	    <h2 class="section">Saving your parameters</h2>
 		<div class="collapsable">
+			<div>
 		    	<p>The simplest way to save your parameters is via <code>GUI.saveURL()</code>. This method directs your browser to a URL containing the current GUI settings.</p>
 		    	<pre class="prettyprint">
 // Make a button for the url function
 gui.add(GUI, "saveURL");</pre>
-    
+			</div>
 		</div>
 	</div>
 	<div class="collapsed">
 	    <h2 class="section">Advanced saving</h2>
 		<div class="collapsable">
+			<div>
 		    	<p>Let's say you'd like to share your settings with someone. Instead of sending a long link with lots of parameters stored in it, you can make your saved settings the defaults.</p>
 
 		    	<p>First, add the method <code>GUI.showSaveString()</code> to a gui object:</p>
@@ -212,18 +219,22 @@ gui.add(someObject, "someOtherProperty");</pre>
 		    	<p><strong>Save strings won't work if you change the order in which you've added properties to your gui objects, or the order of the gui objects themselves.</strong>. If you want to add more parameters to your gui and use an old save string, make sure they're added after the properties whose values you've saved.</p>
 	    	</div>
 		</div>
+    </div>
 
 	<div class="collapsed">
 	    <h2 class="section">Listen for variable changes outside of the GUI</h2>
 		<div class="collapsable">
+			<div>
 		    	<p>Let's say you have a variable that changes by itself from time to time. If you'd like the GUI to reflect those changes, use the <code>listen()</code> method.</p>
 		    	<pre class="prettyprint">gui.add(obj, "changingProperty").listen();</pre>
 	    	</div>
 		</div>
+	</div>
     
 	<div class="collapsed">
 		<h2 class="section">Advanced listening</h2>
 		<div class="collapsable">
+			<div>
 		    	<p>By default, <strong>gui-dat</strong> will create an internal interval that checks for changes in the values you've marked with <code>listen()</code>. If you'd like to check for these changes in an interval of your own definition, use the following:</p>
 		    	<pre class="prettyprint">
 gui.autoListen = false; // disables internal interval
@@ -247,10 +258,12 @@ setInterval(function() {
 }, 1000 / 60);</pre>
 			</div>
 		</div>
+	</div>
     
 	<div class="collapsed">
 	    <h2 class="section">Multiple panels and custom placement</h2>
 		<div class="collapsable">
+			<div>
 		    	<p>You can instantiate multiple <code>GUI</code> objects and name them however you'd like.</p>
 		    	<pre class="prettyprint">var gui1 = new GUI();
 var gui2 = new GUI();
@@ -275,10 +288,12 @@ gui.domElement.style.left = "20px";
 document.getElementById("my-gui-container").appendChild( gui.domElement );</pre>
 			</div>
 		</div>
+    </div>
 
-	<div class="collapsed last">
+	<div class="collapsed">
 	    <h2 class="section">Pro tips.</h2>
 		<div class="collapsable">
+			<div>
 			    <ol id="secrets">
 		          <li><strong>gui-dat</strong> panels are resizeable. Drag the show/hide button.</li>
 
@@ -286,8 +301,11 @@ document.getElementById("my-gui-container").appendChild( gui.domElement );</pre>
 			    </ol>
 			</div>
 	    </div>
+	</div>
 	
-    <footer>Initiated by <a href="http://georgemichaelbrower.com/">George Michael Brower</a> and <a href="http://jonobr1.com/">Jono Brandel</a> of the Data Arts Team, Google Creative Lab.
+	<div class = "trans">&nbsp;</div>
+	
+    <footer class = "trans">Initiated by <a href="http://georgemichaelbrower.com/">George Michael Brower</a> and <a href="http://jonobr1.com/">Jono Brandel</a> of the Data Arts Team, Google Creative Lab.
 	</footer>
 </body>
 </html>