javascript - show & hide - hide

Question

I'm trying to create a show & hide toggle with the elements hidden when the page loads.
so far...
.incl {
position: absolute;
z-index: 800;
background-color: #00689C;
text-align: left;
padding:0 5px 5px 5px;
color: #ffffff;
font-size:1em;
border-radius:3px;
line-height:1.4em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#incl").toggle(1000);
});
});
</script>
<button>INCLUDES</button>
<div id="incl">
<ul class="incl">
<li>bla bla</li>
<li>bla ti bla</li>
<li>bla bla bla</li>
</ul>
</div>
The problem here is the content loads as I get to the page. I need it the other way around.

Answer 1

Added #incl { display: none; } and $("button").click(function(){ ... $(this).hide(); });
#incl {
display: none;
}
.incl {
position: absolute;
z-index: 800;
background-color: #00689C;
text-align: left;
padding:0 5px 5px 5px;
color: #ffffff;
font-size:1em;
border-radius:3px;
line-height:1.4em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#incl").toggle(1000);
$(this).hide();
});
});
</script>
<button>INCLUDES</button>
<div id="incl">
<ul class="incl">
<li>bla bla</li>
<li>bla ti bla</li>
<li>bla bla bla</li>
</ul>
</div>

Answer 2

add
#incl{display:none;}
to css