<input id="first" type="checkbox">
<input id="second" type="checkbox">
<div class="main-container">
<div class="box first">
<label for="first"> Toggle First Content
</label>
<label for="second"> Toggle Second Content
</label>
</div>
<div class="box">
<div class="first content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse officiis expedita eius hic porro odit rerum fugit fugiat perspiciatis, placeat velit alias, voluptatem cumque laboriosam unde aperiam blanditiis ratione quisquam!
Minima, excepturi. Modi tempora maxime nobis provident laudantium fuga consequatur perspiciatis dolorum deleniti hic illum nemo sunt aperiam amet dolorem, sapiente natus delectus nesciunt est accusantium. Soluta quo tenetur repellendus?
<label for="first"> Hide this section
</label>
</div>
</div>
<div class="box">
<div class="content second">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse officiis expedita eius hic porro odit rerum fugit fugiat perspiciatis, placeat velit alias, voluptatem cumque laboriosam unde aperiam blanditiis ratione quisquam!
Minima, excepturi. Modi tempora maxime nobis provident laudantium fuga consequatur perspiciatis dolorum deleniti hic illum nemo sunt aperiam amet dolorem, sapiente natus delectus nesciunt est accusantium. Soluta quo tenetur repellendus?
</div>
</div>
</div>
*{
box-sizing: border-box;
}
html{
width: 100%;
height: 100%;
}
body{
color: #ddd;
margin: 0px!important;
border: none;
padding: 0px;
background-color: teal;
display:flex;
flex-wrap: wrap;
position: relative;
justify-content: space-around;
align-items: center;
width: 100%;
height: 100%;
font-family: sans;
}
body>input{
display: none;
}
.box {
display: flex;
flex-wrap: wrap;
border: 1px solid #ddd;
padding: 20px;
}
label{
display: block;
background-color: cornflowerblue;
padding: 5px 20px;
font-size: 1.3em;
cursor: pointer;
margin: 5px;
border-radius: 4px;
}
.content{
padding: 20px;
visibility: hidden;
}
#first:checked~.main-container .first.content {
visibility: visible;
}
#second:checked~.main-container .second.content {
visibility: visible;
}
This Pen doesn't use any external CSS resources.