Hello,
I have a page where when a button is clicked, I want that div to be replaced by the content of another div (which loads as display:none).
I first tried fadeOut/fadeIn but the div will not occupy the same space as the div it's replacing, no matter what I try (such as giving it a high z-index).
The way I was able to achieve what i wanted to do was like this:
$(document).ready(function(){
$("#reply-button").click(function(){
$('#showprofile').html($('#showreply').html());
});
});
The above works fine, but it gets more complicated once I add in a "cancel" button which should toggle the div back to its original content:
$(document).ready(function(){
var showprofile_orig = $('#showprofile').html();
$("#reply-button").click(function(){
$('#showprofile').html($('#showreply').html());
$('#reply').submit(function() {
alert('test');
});
$('#reply-cancel').click(function(){
$('#showprofile').html(showprofile_orig);
});
});
});
The above works but the runs into a problem. If they click to cancel, then click reply once more, nothing happens. I suspect I need to put the reply-button function inside the reply-cancel function there to make that work, but then I need to nest the cancel function inside that and so on to infinity.
Obviously, there is something I am missing/doing wrong.
Please help, if you know how to properly write this jquery code :)