It works but it doesn't start off with my 'more details' content toggled to hidden. It starts off with the content showing. I have rewritten this 10 times and can't figure it out.
function toggle() {
let Text = document.getElementById('moreDetails');
if (Text.style.display == "none") {
Text.style.display = "block";
} else {
Text.style.display = "none";
}
}<div id="moreDetails">
<h3> 001 </h3>
<h3> Saturate Radio </h3>
<h4> N00DS </h4>
</div>
<button title="Click to Show" type="button" onclick="toggle()">MoreDetails</button>add style display none to your div id moreDetails
<div id="moreDetails" style="display: none">
or you can use like this also
<script>
function toggle(){
let Text = document.getElementById('moreDetails');
if(Text.style.display == "none"){
Text.style.display= "block";
}
else {
Text.style.display = "none";
}
}
document.getElementById("moreDetails").style.display = "none";
</script>
or you can use ternary operator
<script>
function toggle(){
const Text = document.getElementById('moreDetails');
Text.style.display = Text.style.display == "none" ? "block" : "none";
}
document.getElementById("moreDetails").style.display = "none";
</script>
To start with more details hidden, you should add style="display: none;" to your div; Here's the code:
function toggle() {
let Text = document.getElementById('moreDetails');
if (Text.style.display == "none") {
Text.style.display = "block";
} else {
Text.style.display = "none";
}
}<div id="moreDetails" style="display: none;">
<h3> 001 </h3>
<h3> Saturate Radio </h3>
<h4> N00DS </h4>
</div>
<button title="Click to Show" type="button" onclick="toggle()">MoreDetails</button>Add display none for div.
function toggle(){
const Text = document.getElementById('moreDetails');
Text.style.display = Text.style.display == "none" ? "block" : "none";
}<div id="moreDetails" style="display: none">
<h3> 001 </h3>
<h3> Saturate Radio </h3>
<h4> N00DS </h4>
</div>
<button title="Click to Show" type="button" onclick="toggle()">MoreDetails</button>