I'm encountering a small issue. I need a button to reveal more content. Therefore, I require a way to hide this content initially and display it upon clicking, with the ability to reverse this action by hiding it again.
Despite my efforts, the content inside id=more always appears on the page.
What I want is for it to remain hidden initially.
This is what I've attempted:
<button onclick="myFunction()">More</button>
<div class="black" id="more">
<p>I was supercool guys.... bla bla bla bla</p>
</div>
<script>
function myFunction() {
var x = document.getElementById('more');
if (x.style.display == "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
I also tried the following with no noticeable changes:
<button onclick="myFunction()">More</button>
<div class="black" id="more">
<p>I was supercool guys.... bla bla bla bla</p>
</div>
<script>
function myFunction() {
var x = document.getElementById('more');
if (x.style.display == "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
</script>
What could I be overlooking?
My project involves HTML, JavaScript, and PHP.