Question

I have this html right now:

<h1><span class = 'highlight'><input type='image' class='removeall' src='remove.png'>
    <input type='image' class='edit' src='edit.png'>
    {$result['title']}</span></h1>

<form action = "addin.php" method="get">
<textarea name="add" id="add"></textarea>
You have <span id="charsLeft"></span> chars left
</br>
<input type="submit" value="Add">
</form>

What I want to do in jquery is onclick of the .edit <input> type, <h1></h1> and its contents would be removed, and the later html (textarea) should fadein in its place. Anyone know a simple way to do this?

 

Answer 1

try this one

$(document).ready(function(){
    $('#add').hide();
    $('.edit').click(function(){
        $('.edit').val('');
        $('#add').fadeIn();
    });
    $('.highlight').unwrap();
});