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>
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>