press a button to a css div block - html

Question

I am working on a website.
I have a div block
<div id="table_and_dqinfo" class="table_and_dqinfo">
<div id="dqdiv" class="dqinfo">
<h4 class="centertext">Information Pane</h4>
<div id="dqdiv_volgraph"></div>
</div>
</div>
dqdiv_volgraph is an image block which has the image link.
Instead of putting the div block above into the CSS to show the image directly on the website, I want to put a CSS button, so that only after I press the button, it would open the div block above to show the image on the website.
Could anyone give me some hints about how to do it?

Answer 1

Is this what u want?
I used checkbox and label as a button.
When you click on label, it checks the checkbox, then using sibling selector (+) of CSS
input:checked + #dqdiv_volgraph{
display:block;
}
I toggle the visibility of the #dqdiv_volgraph div
Feel free to style the label tag and make it look like a button according to your project
Note that the for attrib of label and id of the input should
be same
input,
#dqdiv_volgraph {
display: none;
}
label {
border: 1px solid black;
padding: 5px;
cursor: pointer;
}
input:checked+#dqdiv_volgraph {
display: block;
}
<div id="table_and_dqinfo" class="table_and_dqinfo">
<div id="dqdiv" class="dqinfo">
<h4 class="centertext">Information Pane</h4>
<input id="checkb" type="checkbox">
<div id="dqdiv_volgraph">
<h1>Put image here</h1>
<img src="https://placehold.it/200x200">
</div>
<label for="checkb"> Click me</label>
</div>
</div>

Answer 2

Alternatively, you could also use JavaScript to solve this particular issue.
function showImage(n) {
var Images = document.getElementsByClassName("table_and_dqinfo");
//Get all elements with class "table_and_dqinfo"
var i = 0;
if (Images[n].style.display == "block") {
Images[n].style.display = "none";
return;
}
//Checks to see if the selected Image is already visible. If so it
//switches it makes it invisible
for (i = 0; i < Images.length; i++) {
Images[i].style.display = "none";
}
//Make the other Images invisible.
Images[n].style.display = "block";
//Change selected Image to visible
}
function showAll() {
var Images = document.getElementsByClassName("table_and_dqinfo");
var i = 0;
for(i = 0; i < Images.length; i++) {
if (Images[i].style.display == "block") {
Images[i].style.display = "none";
continue;
}
Images[i].style.display = "block";
}
}
.table_and_dqinfo {
display: none;
background-color: blue;
color: white;
}
.button {
border: 1px solid black;
cursor: pointer;
margin: 20px;
}
<span class="button" onclick="showImage(0)"> Button for Image 1 </span>
<span class="button" onclick="showImage(1)"> Button for Image 2 </span>
<span class="button" onclick="showAll()"> Button to show all Images </span>
<div class="table_and_dqinfo">
<div>
<h4>Image 1</h4>
<div></div>
</div>
</div>
<div class="table_and_dqinfo">
<div>
<h4>Image 2</h4>
<div></div>
</div>
</div>
Style the button as you please. You can also put whatever you want inside the <div class="table_and_dqinfo">