HTML e JS use Simple Collapsible and include text from external file

Question

I need idea and suggestion for my problem. I would like to use two combined functions in simple HTML page. Use the COLLAPSIBLE buttons to make a text imported from a TXT file appear... this is my code but it doesn't hide the text when loading.

<div class="container">
<h2>Simple Collapsible</h2>
<p>Click on the button to toggle between showing and hiding 
content.</p>
<button type="button" class="btn btn-info" data-toggle="collapse" 
data-target="#txt">Simple collapsible</button>
<div id="demo" class="collapse">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
enim ad minim veniam, quis nostrud exercitation ullamco laboris 
nisi ut aliquip ex ea commodo consequat.
</div>
</div>

<!--includi file txt-->
<p><object type="text/plain" data="test.txt" id="txt">
contenuto file .txt con accentate
</object></p>

Answer 1

this is how it works if someone needs it ;-)

<style>
.collapsible {
background-color: #808080;
color: orange;
cursor: pointer;
padding: 15px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}

.active, .collapsible:hover {
background-color: #555;
}

.collapsible:after {
content: '\002B';
color: white;
font-weight: bold;
float: right;
margin-left: 5px;
}

.active:after {
 content: "\2212";
}

.content {
 padding: 0 15px;
 max-height: 0;
 overflow: hidden;
 transition: max-height 0.2s ease-out;
 background-color: #f1f1f1;
 }
 </style>




 <button class="collapsible">SERIE A GIRONE A</button>
 <div class="content">
 <p><object type="text/plain" data="serieA1.txt" id="txt" style="overflow: 
 hidden; width: 532px; height: 395px;" height="395" width="532">SERIE A 
 GIRONE A
 </object></p>
 </div>