how to display a div only when a button is clicked - html

Question

Hi i want to only display the div id placeholder1, placeholder2, etc once i click different buttons. but i am not sure how to start on it. do help me, thank you :-) below are my codes for the different div ids.
<div id="content">
<div class="demo-container">
<div id="placeholder1" class="demo-placeholder"></div>
</div>
<div class="demo-container" style="height:150px;">
<div id="overview1" class="demo-placeholder"></div>
</div>
<p>Carbon Dioxide Reading</p>
<div class="demo-container">
<div id="placeholder2" class="demo-placeholder"></div>
</div>
<div class="demo-container" style="height:150px;">
<div id="overview2" class="demo-placeholder"></div>
</div>
<p>Gas Reading</p>
<div class="demo-container">
<div id="placeholder3" class="demo-placeholder"></div>
</div>
<div class="demo-container" style="height:150px;">
<div id="overview3" class="demo-placeholder"></div>
</div>
<p>Humidity Reading</p>
<div class="demo-container">
<div id="placeholder4" class="demo-placeholder"></div>
</div>
<div class="demo-container" style="height:150px;">
<div id="overview4" class="demo-placeholder"></div>
</div>
<p>Temperature Reading</p>
<div class="demo-container">
<div id="placeholder5" class="demo-placeholder"></div>
</div>
<div class="demo-container" style="height:150px;">
<div id="overview5" class="demo-placeholder"></div>
</div>
</div>

Answer 1

To show a div when a button is clicked, you can add this to your CSS:
.demo-placeholder {
display: none;
}
Then, for example, this is your button:
<input type="button" id="but1" class="buttons" onclick="showDiv1()">Show Button 1
Then add this to your JavaScript:
function showDiv1(){
document.getElementById("placeholder1").style.display = 'block';
}
NOTE
When you want to do this for multiple buttons, make sure to NOT use the same funciton, but change the numbers to the div you want to show. If you need more help with this, just let me know and I'll update my answer.
I hope this helped you!

Answer 2

This is very basic JQuery code:
$("#ph1").click(function(){
$("[id^='placeholder']").hide();
$("#placeholder1").show();
});
$("#ph2").click(function(){
$("[id^='placeholder']").hide();
$("#placeholder2").show();
});
$("#ph3").click(function(){
$("[id^='placeholder']").hide();
$("#placeholder3").show();
});
$("#ph4").click(function(){
$("[id^='placeholder']").hide();
$("#placeholder4").show();
});
$("#ph5").click(function(){
$("[id^='placeholder']").hide();
$("#placeholder5").show();
});
Here is the JSFiddle demo
I added buttons with ids ph1, ph2 etc...
and clicking on the button performs the follow:
$("[id^='placeholder']").hide(); hides all elements that have placeholder text in their ID
$("#placeholder1").show(); shows the element with the defined ID (in this case placeholder1)