Tried to update the animations for documentation and utterly failed. Sad face. Line 89 of demo.css

demo/demo.css

@@ -86,16 +86,14 @@ div.expanded h2:before, div.collapsed h2:before {
 	font-size: 9px;
 	font-family: Monaco, monospace;
 }
-
-div.collapsed .collapsable {
+/* Can't seem to get this transition to work :( */
+div.collapsable {
 	overflow: hidden;
 	clear: both;
-	height: 0;
-}
-div.expanded .collapsable {
-	overflow: hidden;
-	clear: both;
-	height: auto;
+	height: 0px;
+	-moz-transition: height .2s linear;
+	-webkit-transition: height .2s linear;
+	transition: height .2s linear;
 }
 div.expanded { cursor: pointer; }
 

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

@@ -74,8 +74,11 @@
 					
 					if(this.className == 'collapsed') {
 						this.className = 'expanded';
+						var children = this.childNodes;
+						this.childNodes[3].style.height = 'auto';
 					} else {
 						this.className = 'collapsed';
+						this.childNodes[3].style.height = '0px';
 					}
 				}
 				
@@ -241,7 +244,7 @@ gui.add(obj, "changingProperty").listen();
 
 // Make your own loop
 setInterval(function() {
-		gui.listen(); // updates values you've marked with listen()
+	gui.listen(); // updates values you've marked with listen()
 }, 1000 / 60);</pre>
 
 	    	<p>Alternatively, you can forego calling <code>listen()</code> on individual controllers, and instead choose to monitor changes in <em>all</em> values controlled by your gui.</p>
@@ -253,7 +256,7 @@ gui.add(obj, "properties");
 
 // Make your own loop
 setInterval(function() {
-		gui.listenAll(); // updates ALL values managed by this gui
+	gui.listenAll(); // updates ALL values managed by this gui
 }, 1000 / 60);</pre>
 		</div>
 	</div>