Showing hidden content via css - css

Question

So, to better explain, I am attaching a simple image of what I am trying to achieve.
There is a button, and three contents (two visible and one hidden located in between as shown above).
When the button is clicked, I want to show the hidden content which is located in between to contents.
Is it possible to achieve this with CSS alone?
For example, I can have the hidden content with display:none; then force it visible somehow?
I am not sure what the most efficient way to achieve this.
Any suggestions will be appreciated.
Thanks!

Answer 1

If you want to achieve this using CSS only then there is a way using check boxes or Radio buttons instead of HMTL button tag.
here is a demo https://jsfiddle.net/nileshmahaja/yt76h26n/
HTML
<input type="checkbox" class="check"/>
<div class="box one">1</div>
<div class="box two">2</div>
<div class="box three">3</div>
.box{
height:50px;
width:50px;
background: gray;
margin-bottom:20px
}
.two{
display:none;
}
.check:checked ~ .two {
display:block
}
And you can style checkbox or Radio button as per your convenience.

Answer 2

Do it purely in css solution here:
How to change an image on click using CSS alone?
However, with jquery it can easily be done in 3 seconds with only a couple of lines if you're not opposed to it as shown below!
$("#buttonsid button").click(function(){
$("#idofhiddencontent").toggle();
});

Answer 3

*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.btn{
display: inline-block;
padding: 15px 45px;
border: 2px solid #000;
color: #000;
text-decoration: none;
}
div{
width: 100px;
height: 100px;
border: 2px solid #000;
margin: 25px auto;
}
.block-hidden{
display: none;
border: 2px solid #f00;
color: #f00;
}
.btn:focus ~ .block-hidden{
display: block;
}
Button Click
<div class="block">Block</div>
<div class="block block-hidden">Block Hidden</div>
<div class="block">Block</div>

Answer 4

.visible_content:hover > .hidden_content {display:block;}
when you hover on .visible_content , .hidden_content will be shown.
but with click , I don't think that there be any way to do this via css.
but in jquery , it is simple:
$(".visible_content").click(function(){
$(".hidden_content").fadeIn();
});