<html>
<head>
<style>
.sections {
margin: 0 auto;
height: 100%;
width: 90%;
display: flex;
flex-flow: column wrap;
justify-content: center;
z-index: 1;
position: relative;
}
.blocks {
width: 100%;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
}
.section_caption {
height: 150px;
width: 20%;
display: flex;
align-items: center;
justify-content: center;
background: #ffffff;
border: 1px solid #000;
flex-flow: row nowrap;
margin: 2% ;
cursor: pointer;
background: #000000;
}
.section_caption p {
text-align: center;
padding: 0;
color: #ffffff;
font-size: 14px;
}
.description {
display: block;
position: absolute;
top: 0;
left:-110%;
width: 100%;
height: 100%;
background: rgba(255,0,0, 0.2);
z-index: 5;
transition: 3s;
}
</style>
</head>
<body>
<div id='products' class="sections_description">
<div id='section_tax' class ="sections">
<div class="blocks">
<div class="section_caption">
<p>One</p></div>
<div class="section_caption">
<p>Two</p></div>
<div class="section_caption">
<p>Three</p></div>
</div>
<div class="blocks">
<div class="section_caption">
<p>Four</p></div>
<div class="section_caption">
<p>Five</p></div>
<div class="section_caption">
<p>Six</p></div>
</div>
<div class="blocks">
<div class="section_caption">
<p>Seven</p></div>
<div class="section_caption">
<p>Eight</p></div>
<div class="section_caption" onclick="toggleVisibility('description_debt');">
<p>Nine</p></div>
</div>
<div class='description_blocks'>
<div class='description'>
<p>Text1</p>
</div>
<div class='description'>
<p>Text2</p>
</div>
<div class='description'>
<p>Text3</p>
</div>
<div class='description'>
<p>Text4</p>
</div>
<div class='description'>
<p>Text5</p>
</div>
<div class='description'>
<p>Text6</p>
</div>
<div class='description'>
<p>Text7</p>
</div>
<div class='description'>
<p>Text8</p>
</div>
<div class='description'>
<p>Text9</p>
</div>
</div>
</div>
<script>
document.querySelectorAll('.section_caption').forEach((el, i)=> el.onclick =()=> document.querySelectorAll('.description')[i].style.left = 0);
document.querySelectorAll('.description').forEach(el=> el.onclick =()=> el.style.left = '-120%');
</script>
</body>
</html>