Toggle (slideIn / FadeOut) multiple Divs in the same place by individual menu items

Toggle (slideIn / FadeOut) multiple Divs in the same place by individual menu items

Hi everybody,
since two days I am trying different jQuery codes to get the above described result, but didn't get the result I want yet :(

Now I just hope you, the experts here, can help me out a little with that.

I've deleted my old attempts, so it's not too confusing. I'm sure it's just an easy thing for you guys and I really appreciate every help you can help me here.

Ok this is the html
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>SlideIn</title>
  6. <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

  7. <style>
  8. body {
  9. background-color: #000;
  10. }

  11. a {
  12. color: #fff;
  13. text-decoration: none;
  14. }

  15. header {
  16. width:347px;
  17. height:100px;
  18. border: 0px solid yellow;
  19. background-color: #c6c6c6;
  20. margin-top: 5%;
  21. margin-left: 5%;
  22. }

  23. footer {
  24. border-top: 2px solid #C5C6C6;
  25. /*
  26. background-color: red;
  27. */
  28. bottom: 0;
  29. left:0px;
  30. right:0px;
  31. margin-right: 5%;
  32. margin-left: 5%;
  33. position: absolute;
  34. color: #C5C6C6;
  35. }

  36. footer div {
  37. border-top:0px solid red;
  38. /*
  39. background-color: yellow;
  40. */
  41. width: 100%;
  42. text-align: right;
  43. color: #C5C6C6;
  44. }

  45. footer div ul {
  46. }

  47. footer div ul li {
  48. font-size: 2em;
  49. list-style-type: none;
  50. display: inline;
  51. padding-left: 0.5%;
  52. color: #C5C6C6;
  53. }

  54. footer div ul li:hover {
  55. color: #fff;
  56. }
  57. </style>

  58. </head>

  59. <body>
  60. <header></header>

  61. <content>
  62. <!-- hier die Inhaltdivs zum slideIn -->
  63. </content>
  64. <footer>
  65. <div>
  66. <ul id="icons">
  67. <a href="#"><li id="link_1">Link1</li></a>
  68. <a href="#"><li id="link_2">Link2</li></a>
  69. </ul>

  70. </div>
  71. </footer>

  72. <script src="script.js"></script>
  73. <script>

  74. </script>

  75. </body>
  76. </html>

What I'd like to do is sliding up a content div when clicking one of the menu items on the bottom right side.
By clicking the same link or a Close-Link inside the wrapperDiv it should slide down again.
When the contentDiv for Link1 is visible and you click Link2, the whole wrapperDiv for Link1 should fade out and wrapperDiv for Link2 should slide up.

Hope I could explain it fair enough. Sorry for my not sooo good english, I'm a little bit out of practise.... just as I am with coding :-)

Thank you in advance!