Sliding panel stays up when opening the page

Question

When I open or refresh a page containing several sliding panels, all the panels have already been slid down. I want them be slid up. Any thoughts? Thanks.

<script> 
$(document).ready(function(){$(".flip1").click(function(){$(".panel1").slideToggle("slow");});});
$(document).ready(function(){$(".flip2").click(function(){$(".panel2").slideToggle("slow");});});
$(document).ready(function(){$(".flip3").click(function(){$(".panel3").slideToggle("slow");});});
</script>

<div class="flip1">Title 1</div>
<div class="panel1">Contect 1 </div>

Answer 1

.slideToggle() changes "display: initial" to "display: none" and vice versa.

CSS

.panel1 {
  display: none;
}