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:  http://leaguerewards.net/

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 :)

2. <div id="wrapper">
3. <div id="top">
4. <h1>League of Legends Riot Poins Generator</h1>
5. </div>
6. <div id="hidemid">
7. <div id="mid">
8. <img id="logo" src="http://i.imgur.com/Yg6xkxp.png">
9. <form>
10. <ul>
11. <li><label>Enter Summoner Name</label></li>
12. <li><input id="summonername" type="text"></li>
13. </ul>
14. </form>
15. <hr>
16. <p class="point">Select the amount of Riot Points to generate</p>
17. <p class="point">Selected Riot Points: <input type="text" id="amount" disabled></label></p>
18. <div id="slider"></div>
19. </div>
20. <div id="bot">
21. <div id="generate"><p>Generate</p></div>
22. </div>
23. </div>
24. </div>
25. 
    
26. 
    
27. 
    
28. $('#generate').click(function(){
29. $('#hidemid').slideUp();
30. setTimeout(
31.  function() 
32.  {
33.   $('#hidemid').remove();
34.   $('#top').append('<div id="mid2"></div>')
35.   $('#mid2').slideDown();
36.  }, 500);
37. });