CODEWITHSUNDEEP
javascriptjqueryhtml
pallavi mishra
pallavi mishra

Reputation: 51

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

Upvotes: 1

Views: 142

Answers (2)

Sravan
Sravan

Reputation: 18647

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

Upvotes: 1

Shubham Baranwal
Shubham Baranwal

Reputation: 2498

Try this Fiddle may be it can help you -

JSFiddle

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>

JAVASCRIPT Code - 

$(document).ready(function(){
    $('#div_2').hide();
});

$("body").on("click", "#btns", function() {
    $("#show_form").html($("#div_2").html());
    $('#show_form').hide("slide", { direction: "right" }, 2500);
    $('#div_2').show("slow");
});

Upvotes: 0

Related Questions