I currently use this spoiler code to hide things:
<div class="pre-spoiler">
<input name="Deutsch" type="button"
onClick="if (this.parentNode.getElementsByTagName('div')[0].style.display != 'none') {
this.parentNode.getElementsByTagName('div')[0].style.display = 'none';
this.value = 'ButtontextSpoiler';
} else {
this.parentNode.getElementsByTagName('div')[0].style.display = 'block';
this.value = 'ButtontextSpoiler';
}" value="ButtontextSpoiler">
<div class="spoiler" style="display: none;">
<br>Text
</div>Only problem is: Everything inside that spoiler code is being fetched upon pageload.
I'd like the content to be loaded only if the spoiler button is opened.
Is this possible somehow ?
I looked into "lazy loading", but that seems unnecessary complicated.
Writing to dom upon spoiler open seems weird too, especially as I have many lines that need to be "halted" within the spoiler tag.
Nevermind..
I used CSS and an iFrame.
There:
<!---------------Newart------------------->
<style>
.dropbtn {
background-color: #04AA6D;color: white;padding: 16px;font-size: 16px;border: none;
}
.dropdown {
position: relative;display: inline-block;
}
.dropdown-content {
display: none;position: absolute;background-color: #f1f1f1;min-width: 160px;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);z-index: 1;
}
.dropdown-content a {
color: black;padding: 12px 16px;text-decoration: none;display: block;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #3e8e41;}
</style>
</head>
<body>
<div class="dropdown">
<button class="dropbtn">RecentArt</button>
<div class="dropdown-content">
<a href="0newart.html" target="iframemyart">Newart</a>
</div>
<br>
</div>
</body>
<br><iframe src="Click_-The_Rent_Art_Menu_for_new_art" name="iframemyart" width="80%" height="500" scrolling="yes" frameborder="0" allowtransparency="true"></iframe>
<!---------------Newart------------------->