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> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>UAAP | Uberspace Account Administration Panel</title> <title>UAAP | Uberspace Account Administration Panel</title>
@@ -23,26 +24,27 @@
<hr /> <hr />
<div id="outer"> <div id="outer">
<div class="holder"> <div class="holder">
<h2 id="adduser">Add an Email account</h2> <h2 id="adduser">Add an Email account</h2>
<p>You can add a new Email account your primary and all other domains.<br /> <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> Please do not add your domain, just everything in front of the @-symbol.</p>
<div class="more"> <div class="more">
<i class="show">more &#187;</i> <i class="show">Show &#187;</i>
<i class="hide">&#171; less</i> <i class="hide">&#171; Hide</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 /> <br />
<button type="submit" name="action" value="adduser">Add new account</button> <form action="submit.php" method="post">
<!-- Hidden confirmation box --> <label>Username:</label>
<input type="hidden" name="sure" value="yes" /> <input name="user" title="User" />
</form> <label>Password:</label>
</div> <!-- /more --> <input name="pass" title="Password" type="password" />
<hr /> <br />
</div> <!-- /holder --> <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 --> </div> <!-- outer -->
<h2 id="changepw">Change password of an Email account</h2> <h2 id="changepw">Change password of an Email account</h2>

View File

@@ -25,20 +25,52 @@ button {
/* Click Toogle */ /* Click Toogle */
/* always visible */ /* always visible */
#outer .holder {padding:1em; border:1px solid #ddd; margin:0 20px 10px 0;} #outer .holder {
#outer .holder p {padding:5px 0 0 0; margin:0;} padding:1em;
#outer .holder p.bold {font-weight:bold;} border:1px solid #ddd;
#outer .holder h2 {margin:0; padding:0;} 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 */ /* 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 {
#outer div.more i.hide {display:none;} float:left;
#outer div.more p {display:none;} margin-right:-10px 10px 0 0;
#outer div.more img {display:none;} 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 */ /* clicked style div.click */
#outer div.click i.show {display:none;} #outer div.click i.show {
#outer div.click i.hide {display:block;} display:none;
#outer div.click p {display:block;} }
#outer div.click img {display:block; float:left; padding-right:10px;} #outer div.click i.hide {
display:block;
}
#outer div.click p {
display:block;
}
#outer div.click form {
display:block;
}