Show / Hide Elements | javascript *

https://stackoverflow.com/questions/6242976/javascript-hide-show-element

function showStuff(id, text, btn) {
    document.getElementById(id).style.display = 'block';
    // hide the lorem ipsum text
    document.getElementById(text).style.display = 'none';
    // hide the link
    btn.style.display = 'none';
}
<td class="post">

<a href="#" onclick="showStuff('answer1', 'text1', this); return false;">Edit</a>
<span id="answer1" style="display: none;">
<textarea rows="10" cols="115"></textarea>
</span>

<span id="text1">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</span>
</td>

Example Two – JQUERY

https://stackoverflow.com/questions/21202359/how-do-i-hide-a-part-of-a-form-and-make-it-visible-only-on-clicking-a-add-anoth

Put the form inside a container Set the container's CSS to display:none Set up a click handler on some element that triggers jQuery's show/hide methods Your HTML:

<a id="toggleformpart2" href="#">Part 2</a>
<div id="hideform">
	// form elements in here
</div>

Your javascript:

$( "#toggleform" ).on( "click", function() {
$('#hideform').toggle();
});
Or if you don't want to toggle the hiding:

$( "#toggleform" ).on( "click", function() {
$('#hideform').show();
});

Your CSS: