Help for my site SlideToggle

Hi, so this is my website http://www.noor-azmi.com/nt/ , it is just a dummy website i am doing for my portfolio. You will see 3 boxes with the "click to know more". I am doing a Jquery function for it but if you click the 1st button to hide the contents, suddenly the 2nd box content will move under the 1st button. It only works correctly when u click on the 3rd button and the contents will not move.

Also actually i want the contents to not be seen 1st. Now the contents is seen 1st and when u click, it will hide. How do i make the contents not be seen 1st ?

BTW the 3 buttons i created with 1 class but then each of it i gave its own ID. Is that correct ?

Same goes with the 3 contents panel below it.

BTW below is the code i use,

$(document).ready(function(){
$("#darwin_button").click(function(){
$("#darwin_panel").slideToggle("slow");
});

$("#kakadu_button").click(function(){
$("#kakadu_panel").slideToggle("slow");

});

$("#alice_button").click(function(){
$("#alice_panel").slideToggle("slow");

});


});

 

Technically, you don't need javascript at all for that:
https://jsfiddle.net/8u89ysgv/1/