Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Hidden property of a button in HTML

I am trying to show three buttons on one button click. Before a button click all three buttons are hidden. I set the hidden property and I am also calling a function on a button click. The problem is that when I load the page all buttons are visible. It was working perfectly before I added CSS. I don't understand where the problem is.

Here is my code:

    .buttons a, .buttons button{
    display:block;
    float:left;
    margin:0 7px 0 0;
    background-color:#f5f5f5;
    border:1px solid #dedede;
    border-top:1px solid #eee;
    border-left:1px solid #eee;

    font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
    font-size:12px;
    line-height:130%;
    text-decoration:none;
    font-weight:bold;
    color:#565656;
    cursor:pointer;
    padding:5px 10px 6px 7px; /* Links */
    }
    .buttons button{
    width:auto;
    overflow:visible;
    padding:4px 10px 3px 7px; /* IE6 */
    }
    .buttons button[type]{
    padding:5px 10px 5px 7px; /* Firefox */
    line-height:17px; /* Safari */
    }
    *:first-child+html button[type]{
        padding:4px 10px 3px 7px; /* IE7 */
    }
    .buttons button img, .buttons a img{
    margin:0 3px -3px 0 !important;
    padding:0;
    border:none;
    width:16px;
    height:16px;
    }

    /* STANDARD */

    button:hover, .buttons a:hover{
    background-color:#dff4ff;
    border:1px solid #c2e1ef;
    color:#336699;
    }
    .buttons a:active{
    background-color:#6299c5;
    border:1px solid #6299c5;
    color:#fff;
    }

    /* POSITIVE */

    button.positive, .buttons a.positive{
    color:#529214;
    }
    .buttons a.positive:hover, button.positive:hover{
    background-color:#E6EFC2;
    border:1px solid #C6D880;
    color:#529214;
    }
    .buttons a.positive:active{
    background-color:#529214;
    border:1px solid #529214;
    color:#fff;
    }

    /* NEGATIVE */

    .buttons a.negative, button.negative{
    color:#d12f19;
    }
    .buttons a.negative:hover, button.negative:hover{
    background:#fbe3e4;
    border:1px solid #fbc2c4;
    color:#d12f19;
    }
    .buttons a.negative:active{
    background-color:#d12f19;
    border:1px solid #d12f19;
    color:#fff;
    }

    /* REGULAR */

    button.regular, .buttons a.regular{
    color:#336699;
    }
    .buttons a.regular:hover, button.regular:hover{
    background-color:#dff4ff;
    border:1px solid #c2e1ef;
    color:#336699;
    }
    .buttons a.regular:active{
    background-color:#6299c5;
    border:1px solid #6299c5;
    color:#fff;
    }
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <link rel="STYLESHEET" type="text/css" href="dba_style/buttons.css" />
      <title>Untitled Document</title> 
      
      <script type="text/javascript">
      function change(){
    document.getElementById("save").hidden = "";
    document.getElementById("change").hidden = "";
    document.getElementById("cancel").hidden = "";

      }
      </script>

    </head>
   
    <body>
      <form name="form1" method="post" action="">
      <div class="buttons">

          <button class="regular" name="edit" id="edit" onclick="change();">
              <img src="dba_images/textfield_key.png" alt=""/>
              Edit
          </button>

          <button type="submit" class="positive" name="save" id="save" hidden="hidden">
              <img src="dba_images/apply2.png" alt=""/>
              Save
          </button>

          <button class="regular" name="change" hidden="hidden" id="change">
              <img src="dba_images/textfield_key.png" alt=""/>
              change
          </button>

          <button class="negative" name="cancel" id="cancel" hidden="hidden">
              <img src="dba_images/cross.png" alt=""/>
              Cancel
          </button>
      </div>
      </form>
    </body>
 </html>

What changes can I make, so that when I click on edit it sets the hidden property of three buttons to false?

like image 419
ashah142 Avatar asked Jul 06 '12 14:07

ashah142


People also ask

What is hidden property in HTML?

An HTML hidden attribute indicates that the element is not yet or is no longer relevant. If something is marked as 'hidden' in the CSS, this makes the element hidden from search engines, making it impossible to display and invisible even to screen readers.

How do you show hidden elements in HTML?

on('loginInServer',function(data){ $('. sideDiv'). prop('hidden', false); }); FYI : For hiding element set CSS display:none; which would be the much better way and later you can show using show() method.

What is the property of button?

Properties of the Button Control Gets or sets the mode by which the Button automatically resizes itself. Gets or sets the background color of the control. Gets or sets the background image displayed in the control.


2 Answers

It also works without jQuery if you do the following changes:

  1. Add type="button" to the edit button in order not to trigger submission of the form.

  2. Change the name of your function from change() to anything else.

  3. Don't use hidden="hidden", use CSS instead: style="display: none;".

The following code works for me:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="STYLESHEET" type="text/css" href="dba_style/buttons.css" />
<title>Untitled Document</title>
</head>
<script type="text/javascript">
function do_change(){
document.getElementById("save").style.display = "block";
document.getElementById("change").style.display = "block";
document.getElementById("cancel").style.display = "block";
}
</script>
<body>
<form name="form1" method="post" action="">
<div class="buttons">

<button type="button" class="regular" name="edit" id="edit" onclick="do_change(); return false;">
    <img src="dba_images/textfield_key.png" alt=""/>
    Edit
</button>

<button type="submit" class="positive" name="save" id="save" style="display:none;">
    <img src="dba_images/apply2.png" alt=""/>
    Save
</button>

<button class="regular" name="change" id="change" style="display:none;">
    <img src="dba_images/textfield_key.png" alt=""/>
    change
</button>

    <button class="negative" name="cancel" id="cancel" style="display:none;">
        <img src="dba_images/cross.png" alt=""/>
        Cancel
    </button>
</div>
</form>
</body>
</html>
like image 75
Aletheios Avatar answered Oct 11 '22 22:10

Aletheios


<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>

function showButtons () { $('#b1, #b2, #b3').show(); }

</script>
<style type="text/css">
#b1, #b2, #b3 {
display: none;
}

</style>
</head>
<body>

<a href="#" onclick="showButtons();">Show me the money!</a>

<input type="submit" id="b1" value="B1" />
<input type="submit" id="b2" value="B2"/>
<input type="submit" id="b3" value="B3" />

</body>
</html>
like image 27
Brant Avatar answered Oct 12 '22 00:10

Brant