Javascript - show & hide

Question

Ich versuche, eine Show zu erstellen & ausblenden Toggle mit den Elementen ausgeblendet, wenn die Seite geladen wird. so weit ...

.incl { 
 
\t position: absolute; 
 
\t z-index: 800; 
 
\t background-color: #00689C; 
 
\t text-align: left; 
 
\t padding:0 5px 5px 5px; 
 
\t color: #ffffff; 
 
\t font-size:1em; 
 
\t border-radius:3px; 
 
\t line-height:1.4em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script> 
 
\t $(document).ready(function(){ 
 
\t \t $("button").click(function(){ 
 
\t \t \t $("#incl").toggle(1000); 
 
\t \t }); 
 
\t }); 
 
</script> 
 

 
<button>INCLUDES</button> 
 
    <div id="incl"> 
 
    <ul class="incl"> 
 
     <li>bla bla</li> 
 
     <li>bla ti bla</li> 
 
     <li>bla bla bla</li> 
 
\t </ul> 
 
    </div>

Das Problem hierbei ist die Inhaltslasten, wie ich auf die Seite zu bekommen. Ich brauche es andersherum.

Answer 1

Added #incl { display: none; } und $("button").click(function(){ ... $(this).hide(); });

#incl { 
 
    display: none; 
 
} 
 

 
.incl { 
 
\t position: absolute; 
 
\t z-index: 800; 
 
\t background-color: #00689C; 
 
\t text-align: left; 
 
\t padding:0 5px 5px 5px; 
 
\t color: #ffffff; 
 
\t font-size:1em; 
 
\t border-radius:3px; 
 
\t 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> 
 
\t </ul> 
 
</div>

Answer 2

hinzufügen #incl {display: none;} zu css