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>
If you want to apply correctly the collapse default behavior to the object element, you need to add the class="collapse".
Something like this:
object {
width: 400px;
height: 150px;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<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>
<!--includi file txt-->
<p><object type="text/plain" data="data:text/plain,contenuto file .txt con accentate" id="txt" class="collapse">
</object></p>You can see some reference here