Generalize toggles to work with arbitrary HTML elements, not just pla…

…in text.

index.html

@@ -246,12 +246,21 @@ <h2>Number Selection</h2>
 		<div class='desc'>
 			<h2>Toggle</h2>
 			<div class='example'>
-				<blockquote>Theodore Robert "Ted" Bundy  was an American <span class='toggle' id='ted1'>serial killer</span>, <span id='ted2' class='toggle' >rapist</span>, <span id='ted3' class='toggle' >kidnapper</span>, and <span id='ted4' class='toggle' >necrophile</span> who assaulted and murdered numerous young women during the 1970s, and possibly earlier. </blockquote>
+			  <blockquote>Theodore Robert "Ted" Bundy  was an American <span class='toggle' id='ted1'><span>serial killer</span><span style="display: none">serial entrepreneur</span></span> and <span id='ted2' class='toggle' ><span style="display: none">rapist</span><span>rapper</span><span style="display: none">flapper</span></span> who assaulted and murdered numerous young women during the 1970s, and possibly earlier. </blockquote>
 				<pre class='sh_javascript_dom'>
-$("#ted1").toggle_select(['serial killer', 'serial entrepreneur']);
-$("#ted2").toggle_select(['rapist', 'rapper', 'flapper']);
-$("#ted3").toggle_select(['kidnapper', 'babysitter']);
-$("#ted4").toggle_select(['necrophile', 'overall, a very decent man']);</pre>
+&lt;span class='toggle' id='ted1'&gt;
+  &lt;span&gt;serial killer&lt;/span&gt;
+  &lt;span style="display: none;"&gt;serial entrepreneur&lt;/span&gt;
+&lt;/span&gt;
+
+&lt;span id='ted2' class='toggle' &gt;
+  &lt;span style="display: none"&gt;rapist&lt;/span&gt;
+  &lt;span&gt;rapper&lt;/span&gt;
+  &lt;span style="display: none"&gt;flapper&lt;/span&gt;
+&lt;/span&gt;
+
+$("#ted1").toggle_select();
+$("#ted2").toggle_select();</pre>
 			</div>
 		</div>
 

verdict.coffee

@@ -70,17 +70,19 @@
     list of alternative contents
 ###
 (($) ->
-  $.fn.toggle_select = (o) ->
+  $.fn.toggle_select = () ->
 
     # Add the event handlers
     toggle = (elem) ->
       elem.click (e) ->
+        children = elem.children()
         n = 0
-        for n in [0..o.length - 1]
-          if o[n] == elem.text()
-            elem.text(o[(n + 1) % o.length])
-            break
-        elem.trigger('verdict_change', elem.text())
+        for i in [0...children.length]
+          if children[i].style.display != "none"
+            n = (i + 1) % children.length
+          children[i].style.display = "none"
+        children[n].style.removeProperty("display")
+        elem.trigger('verdict_change', elem)
 
     @each ->
       toggle $(@),