Show/Hide contents by clicking an icon using CSS (no javascript) - html

Question

Is it possible to use something similar to toggle on/off or show/hide but rather than using panels or accordion menu, use icon-blocks instead?
There are 4 icons arranged in a row, clicking each icon should display the contents below the icon row, but only one content should be displayed at any given time.
I'm looking for CSS/HTML solution only - no javascript.
Icons are arranged in a row, using grid
<!--display icons in a row, 4 columns-->
<div class="quarter">
<span class="icon1"></span>
</div>
Below the 4th 'quarter' div is where the contents should be displayed.
Edit: Final Code
I replaced the position: absolute with float to display all the text below the icons.
.iconBlock{
display: inline-block;
margin: 20px;
padding: 0px 40px 15px 40px;
cursor: pointer;
outline: none !important;
}
.iconBlock a{
font-size: 40px;
color: #000;
}
.contentBlock {
display: none;
height: auto !important;
opacity: 0;
}
.iconBlock:hover a{
color: #444;
}
.iconBlock:focus a{
color: #ff4455;
}
.iconBlock:focus + .contentBlock{
opacity: 1;
display: block;
float: left;
top: 0;
left: 0;
}

Answer 1

I'd recommend using javascript. But here's how to do it without js:
.icon{
display: inline-block;
margin: 20px;
cursor: pointer;
outline: none;
}
.icon i{
font-size: 40px;
color: #000;
}
.content{
position: absolute;
opacity: 0;
}
.icon:hover i{
color: #444;
}
.icon:focus i{
color: #ff4455;
}
.icon:focus + .content{
opacity: 1;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="quarter">
<i class="fa fa-cog"></i>
<div class="content">Content for icon 1</div>
<i class="fa fa-trash"></i>
<div class="content">Content for icon 2</div>
<i class="fa fa-pencil"></i>
<div class="content">Content for icon 3</div>
<i class="fa fa-user"></i>
<div class="content">Content for icon 4</div>
</div>