I'm currently attempting a task that I'm unsure is possible.
Within my li elements, I have hidden divs containing additional content. When I click on an li, the corresponding div is displayed below with a 100% width. However, instead of pushing down the other divs, it overlays them. I understand that using absolute positioning won't push the content down, but I'm not sure how to achieve a 100% width without it.
What I would like is for the hidden div to display beneath its respective li, taking up the entire width of the window, and for any subsequent lis to appear below this content. Essentially, clicking on an li in the first row should reveal a hidden div below it, while maintaining the structure of the grid layout.
You can view the current code here
I welcome any changes or suggestions for the JS or CSS implementation.
I hope I've provided a clear explanation. Could you assist me with this query?
Thank you!
$('.workContent').hide();
$('.containerGrid').click(function() {
$('.workContent').hide();
var idProject = $(this).parent().attr('data-content');
$(idProject).show();
});body {
margin: 0;
padding: 0;
}
.container {
border: 1px solid #ff0000;
margin: 0;
padding: 0;
}
ul {
padding: 0;
margin: 0;
}
li.grid {
display: inline-block;
margin: 0;
padding: 0;
width: 20%;
height: 200px;
float: left;
vertical-align: top;
background-color: #00ff24;
}
li.grid:hover {
background-color: #99f4a6;
}
.containerGrid {
width: 100%;
height: 200px;
}
.containerGrid h2 {
padding: 0;
margin: 0;
}
.workContent {
height: 500px;
border: 1px solid #000;
width: 100%;
position: absolute;
left: 0;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<ul>
<li class="grid" data-content="#project1">
<div class="containerGrid">
<h2>Title grid</h2>
</div>
<div id="project1" class="workContent">
<p>Content 1</p>
</div>
</li>
<li class="grid" data-content="#project2">
<div class="containerGrid">
<h2>Title grid</h2>
</div>
<div id="project2" class="workContent">
<p>Content 2</p>
</div>
</li>
<li class="grid" data-content="#project3">
<div class="containerGrid">
<h2>Title grid</h2>
</div>
<div id="project3" class="workContent">
<p>Content 3</p>
</div>
</li>
<li class="grid" data-content="#project4">
<div class="containerGrid">
<h2>Title grid</h2>
</div>
<div id="project4" class="workContent">
<p>Content 4</p>
</div>
</li>
<li class="grid" data-content="#project5">
<div class="containerGrid">
<h2>Title grid</h2>
</div>
<div id="project5" class="workContent">
<p>Content 5</p>
</div>
</li>
<li class="grid" data-content="#project6">
<div class="containerGrid">
<h2>Title grid</h2>
</div>
<div id="project6" class="workContent">
<p>Content 6</p>
</div>
</li>
<li class="grid" data-content="#project7">
<div class="containerGrid">
<h2>Title grid</h2>
</div>
<div id="project7" class="workContent">
<p>Content 7</p>
</div>
</li>
</ul>
</div>