improve show/hide function

This commit is contained in:
2015-07-09 12:23:07 +03:00
parent 23a440f9c3
commit 6167042168
2 changed files with 66 additions and 32 deletions

View File

@@ -1,4 +1,5 @@
<html>
<!DOCTYPE html>
<html lang="en_EN">
<head>
<meta charset="utf-8">
<title>UAAP | Uberspace Account Administration Panel</title>
@@ -23,26 +24,27 @@
<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" />
<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">Show &#187;</i>
<i class="hide">&#171; Hide</i>
<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 -->
<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>

View File

@@ -25,20 +25,52 @@ button {
/* 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;}
#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;}
#outer div.more i {
float:left;
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 form {
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;}
#outer div.click i.show {
display:none;
}
#outer div.click i.hide {
display:block;
}
#outer div.click p {
display:block;
}
#outer div.click form {
display:block;
}