javascript - show & 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>