improve show/hide function

index.php

@@ -29,8 +29,12 @@
     <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 />
       <form action="submit.php" method="post">
         <label>Username:</label>

static/style.css

@@ -50,7 +50,7 @@ button {
   color:#c00;
   font-weight:bold;
 }
-#outer div.more i.hide {
+#outer div.more button.hide {
   display:none;
 }
 #outer div.more p {
@@ -61,10 +61,10 @@ button {
 }
 
 /* clicked style div.click */
-#outer div.click i.show {
+#outer div.click button.show {
   display:none;
 }
-#outer div.click i.hide {
+#outer div.click button.hide {
   display:block;
 }
 #outer div.click p {