diff --git a/index.php b/index.php
index c83b8dd..f87706e 100644
--- a/index.php
+++ b/index.php
@@ -2,9 +2,10 @@
 <head>
   <meta charset="utf-8">
   <title>UAAP | Uberspace Account Administration Panel</title>
-  <link rel='stylesheet' href='/style.css' type='text/css' media='all' />
+  <link rel='stylesheet' href='/static/style.css' type='text/css' media='all' />
+  <script src="/static/click_toggle.js" type="text/javascript"></script>
 </head>
-<body>
+<body onload="clickMenu('outer','div','more')">
   
 <h1>Account Administration Panel</h1>
 
@@ -21,18 +22,28 @@
 <hr />
 <hr />
 
-<h2 id="adduser">Add an Email account</h2>
-<form action="submit.php" method="post">
-  <label>Username:</label>
-  <input name="user" title="User" />
-  <label>Password:</label>
-  <input name="pass" title="Password" type="password" />
-  <br />
-  <button type="submit" name="action" value="adduser">Add new account</button>
-  <!-- Hidden confirmation box -->
-  <input type="hidden" name="sure" value="yes" />
-</form>
-<hr />
+<div id="outer">
+<div class="holder">
+  <h2 id="adduser">Add an Email account</h2>
+  <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">more &#187;</i>
+    <i class="hide">&#171; less</i>
+    <form action="submit.php" method="post">
+      <label>Username:</label>
+      <input name="user" title="User" />
+      <label>Password:</label>
+      <input name="pass" title="Password" type="password" />
+      <br />
+      <button type="submit" name="action" value="adduser">Add new account</button>
+      <!-- Hidden confirmation box -->
+      <input type="hidden" name="sure" value="yes" />
+    </form>
+  </div> <!-- /more -->
+  <hr />
+</div> <!-- /holder -->
+</div> <!-- outer -->
 
 <h2 id="changepw">Change password of an Email account</h2>
 <form action="submit.php" method="post">
diff --git a/static/click_toggle.js b/static/click_toggle.js
new file mode 100644
index 0000000..51945d2
--- /dev/null
+++ b/static/click_toggle.js
@@ -0,0 +1,28 @@
+/* ================================================================ 
+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
+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) {
+	var getEls = document.getElementById(menu).getElementsByTagName(element);
+
+	for (var i=0; i<getEls.length; i++) {
+			getEls[i].onclick=function() {
+			if ((this.className.indexOf(cname))!=-1)
+			{
+			if ((this.className.indexOf('click'))!=-1) {
+				this.className=this.className.replace("click", "");;
+				}
+				else {
+				this.className+=" click";
+				}
+			}
+		}
+	}
+}
diff --git a/static/style.css b/static/style.css
new file mode 100644
index 0000000..bb153f7
--- /dev/null
+++ b/static/style.css
@@ -0,0 +1,44 @@
+body {
+  color: #333;
+  font-family: Arial,Helvetica,sans-serif;
+  font-size: 100%;
+}
+
+body warn {
+  color: #FF0000;
+}
+
+label {
+  display: block;
+  margin-top: 10px;
+}
+
+button {
+  margin-top: 5px;
+}
+
+.boxed {
+  background: #ECF4FF none repeat scroll 0 0;
+  border: 1px solid green;
+  padding: 6px;
+}
+
+/* Click Toogle */
+/* always visible */
+#outer .holder {padding:1em; border:1px solid #ddd; margin:0 20px 10px 0;}
+#outer .holder p {padding:5px 0 0 0; margin:0;}
+#outer .holder p.bold {font-weight:bold;}
+#outer .holder h2 {margin:0; padding:0;}
+
+/* unclicked style div.more */
+#outer div.more i {float:right; margin-right:-10px 10px 0 0; cursor:pointer; color:#c00; font-weight:bold;}
+#outer div.more i.hide {display:none;}
+#outer div.more p {display:none;}
+#outer div.more img {display:none;}
+
+/* clicked style div.click */
+#outer div.click i.show {display:none;}
+#outer div.click i.hide {display:block;}
+#outer div.click p {display:block;}
+#outer div.click img {display:block; float:left; padding-right:10px;}
+
diff --git a/style.css b/style.css
deleted file mode 100644
index e3bb638..0000000
--- a/style.css
+++ /dev/null
@@ -1,24 +0,0 @@
-body {
-  color: #333;
-  font-family: Arial,Helvetica,sans-serif;
-  font-size: 100%;
-}
-
-body warn {
-  color: #FF0000;
-}
-
-label {
-  display: block;
-  margin-top: 10px;
-}
-
-button {
-  margin-top: 5px;
-}
-
-.boxed {
-  background: #ECF4FF none repeat scroll 0 0;
-  border: 1px solid green;
-  padding: 6px;
-}
