Question

I need help with my HTML styling.

here is the HTML code:

<div id="hidden" style="display: none;">
    <label>URL:</label>
    <input type="text" name="url" size="50"/><br/>
    <input type="button" id="button2" value="Update"/> <br/>
</div>
<input type="button" id="button1" value ="Get Info" 
    onclick="document.getElementById('hidden').style.display = '';" size="25"/>

As you can see, all the elements that are inside <div></div> will be displayed upon clicking button1 (they are hidden initially).

What I want is that when button1 is clicked in addition to all the other fields (including button2) being displayed, button1 to be hidden.

How can I do this?

Answer 1

Change

onclick="document.getElementById('hidden').style.display = '';"

to

onclick="document.getElementById('hidden').style.display = ''; this.style.display = 'none'"

You can see this in action here: http://jsfiddle.net/nayish/sJ5RR/.