pallavi mishra pallavi mishra - 27 days ago 8
HTML Question

Working with JQuery append and slide

I am having trouble hiding old div after appending the content of that div to a div.I want old div to slide right and show the new div with content every time when i click on add more button.

My Html code:

<div id="div_2">
this is div 2
<form class="this_form">
<input type="button" value="buttons" />
</form>
</div>

<div id="show_form">
</div>

<button class="pull-right" type="button" id="btns">add more</button>


This is what I tried so far...
My javascript:

$("body").on("click","#btns",function(){
$("#show_form").append($("#div_2").html());
$('#show_form').hide("slow");
$('#div_2').show("slow");
} );


Thank you

Answer

Please run this code snippet, I think this is want you want to achieve.

From your question,

I want old div to slide right and show the new div with content

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("body").on("click",".btns",function(){
//$(".show_form").html('')
  $(".show_form").append($(".div_2").html()); 
//  $('#div_2').hide("slow");
$('.div_2').animate(
                        {
                            'margin-left':'1000px'
                        },function(){
                            $(".div_2").remove()
                            $('#show_form').attr("id","div_2");
                           $('#div_2').addClass('div_2');
                           $('#div_2').removeClass('show_form');
                            $( "#div_2" ).after(function() {
  return "<div id='show_form' class='show_form'></div>"
});
$('#show_form').addClass('show_form')

                        })
  $('.show_form').show("slow");
} );
});
</script>
</head>
<body>
<div id="div_2" class="div_2">
   this is div 2 
    <form class="this_form"> 
         <input type="button" value="buttons"  />
    </form> 
</div>                 

<div id="show_form" class="show_form">    
</div>
<button class="pull-right btns" type="button" id="btns">add more</button>


</body>

Here is the fiddle