test new show/hide button

index.php

@@ -29,10 +29,6 @@
     <p>You can add a new Email account your primary and all other domains.<br />
     Please do not add your domain, just everything in front of the @-symbol.</p>
     <div class="more">
-<!--
-      <i class="show">Show &#187;</i>
-      <i class="hide">&#171; Hide</i>
--->
       <button type="button" id="show" class="show">Show more &#187;</button>
       <button type="button" id="hide" class="hide">&#171; Show less</button>
       <br />
@@ -51,19 +47,27 @@
   </div> <!-- /holder -->
 </div> <!-- outer -->
 
-<h2 id="changepw">Change password of an Email account</h2>
+<div id="gallery">
-<form action="submit.php" method="post">
+  <h2 id="changepw">Change password of an Email account</h2>
-  <label>Username:</label>
+  <b class="switch"><span class="turn_on">Show</span><span class="turn_off">Hide</span> input fields...</b>
-  <input name="user" title="User" />
+  <div class="hide">
-  <label>New Password:</label>
+    <form action="submit.php" method="post">
-  <input name="pass" title="Password" type="password" />
+      <label>Username:</label>
-  <br />
+      <input name="user" title="User" />
-  <button type="submit" name="action" value="changepw">Change password</button>
+      <label>New Password:</label>
-  <!-- Hidden confirmation box -->
+      <input name="pass" title="Password" type="password" />
-  <input type="hidden" name="sure" value="yes" />
+      <br />
-</form>
+      <button type="submit" name="action" value="changepw">Change password</button>
+      <!-- Hidden confirmation box -->
+      <input type="hidden" name="sure" value="yes" />
+    </form>
+  </div>
 <hr />
 
+</div>
+
+
+
 <h2 id="listusers">List all Email accounts</h2>
 <form action="submit.php" method="post">
   <button type="submit" name="action" value="listusers">List accounts</button>

static/click_toggle.js

@@ -2,27 +2,43 @@
 This copyright notice must be untouched at all times.
 
 The original version of this script and the associated (x)html
-is available at http://www.stunicholls.com/various/more.html
+is available at http://www.stunicholls.com/gallery/more_and_more.html
 Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
 This script and the associated (x)html may be modified in any 
 way to fit your requirements.
 =================================================================== */
 
 
-clickMenu = function(menu,element,cname) {
+onload = function() {
-	var getEls = document.getElementById(menu).getElementsByTagName(element);
+	var e, i = 0;
-
+	while (e = document.getElementById('gallery').getElementsByTagName ('B') [i++]) {
-	for (var i=0; i<getEls.length; i++) {
+		if (e.className == 'switch') {
-			getEls[i].onclick=function() {
+		e.onclick = function () {
-			if ((this.className.indexOf(cname))!=-1)
+			var getEls = document.getElementById('gallery').getElementsByTagName('DIV');
-			{
+				for (var z=0; z<getEls.length; z++) {
-			if ((this.className.indexOf('click'))!=-1) {
+				if (getEls[z].className == 'hide') {
-				this.className=this.className.replace("click", "");;
+				w=getEls[z].previousSibling;
+				while (w.nodeType!=1) {
+					w=w.previousSibling;
+					}
+				w.className=w.className.replace('switch over', 'switch');
 				}
-				else {
+				if (getEls[z].className == 'show') {
-				this.className+=" click";
+				getEls[z].className=getEls[z].className.replace('show', 'hide');
+				w=getEls[z].previousSibling;
+				while (w.nodeType!=1) {
+					w=w.previousSibling;
+					}
+				w.className=w.className.replace('switch off', 'switch over');
 				}
 			}
+			this.className = this.className == 'switch' ? 'switch off' : 'switch';
+			x=this.nextSibling;
+			while (x.nodeType!=1) {
+				x=x.nextSibling;
+				}
+			x.className = this.className == 'switch off' ? 'show' : 'hide';
+			}
 		}
 	}
 }

static/style.css

@@ -23,6 +23,29 @@ button {
   padding: 6px;
 }
 
+/* New click/hide */
+#gallery {position:relative; font:11px verdana,arial,sans-serif; line-height:20px; width:705px; padding: 50px 0 0 10px; background:url(pointer.jpg) no-repeat left top; height:450px;}
+#gallery h3 {color:#222; font-size:13px;}
+#gallery h3.color {color:#000; margin:10px 25px;}
+#gallery .switch {display:block; cursor:pointer; color:#000; font-weight:normal;}
+#gallery .switch .turn_off {display:none;}
+#gallery .off {color:#c00;}
+#gallery .off .turn_off {display:inline;}
+#gallery .off .turn_on {display:none;}
+#gallery .hide {display:none;}
+#gallery .show {position:absolute; top:0; left:380px; display:block; width:370px; background:#fff; z-index:200;}
+#gallery form {width:270px; height:200px; background:url(form.jpg); padding:50px;}
+#gallery form fieldset {background:#fff;}
+#gallery .table {background:url(tables.jpg) no-repeat left bottom; padding:0 25px 25px; width:320px;}
+#gallery table, #gallery caption, #gallery table tr, #gallery table tr td {border:1px solid #000; padding:5px; background:#fff;}
+#gallery a, #gallery a:visited {color:#00c; line-height:30px;}
+#gallery textarea {width:350px; border-color:#0cc; color:#048; padding:10px;}
+#gallery dl {width:370px;}
+
+
+
+
+
 /* Click Toogle */
 /* always visible */
 #outer .holder {
@@ -74,3 +97,4 @@ button {
   display:block;
 }
 
+