Slideup, remove, add new div/content

Slideup, remove, add new div/content


So im trying to make my content slide up when im clicking on a button, then I want it to remove, add new content(div etc) and then slide down again, but it only slides up and adds the div.

My div is set top height:100px and it goes over my border?

Im trying to do something like this:

Enter something in the input and then press generate and then the whole content slides up and something new adds and it slides down smoothly :)

  1. <div id="wrapper">
  2. <div id="top">
  3. <h1>League of Legends Riot Poins Generator</h1>
  4. </div>
  5. <div id="hidemid">
  6. <div id="mid">
  7. <img id="logo" src="">
  8. <form>
  9. <ul>
  10. <li><label>Enter Summoner Name</label></li>
  11. <li><input id="summonername" type="text"></li>
  12. </ul>
  13. </form>
  14. <hr>
  15. <p class="point">Select the amount of Riot Points to generate</p>
  16. <p class="point">Selected Riot Points: <input type="text" id="amount" disabled></label></p>
  17. <div id="slider"></div>
  18. </div>
  19. <div id="bot">
  20. <div id="generate"><p>Generate</p></div>
  21. </div>
  22. </div>
  23. </div>

  24. $('#generate').click(function(){
  25. $('#hidemid').slideUp();
  26. setTimeout(
  27.  function() 
  28.  {
  29.   $('#hidemid').remove();
  30.   $('#top').append('<div id="mid2"></div>')
  31.   $('#mid2').slideDown();
  32.  }, 500);
  33. });