Currently, I have two divs positioned side by side. My objective is to hide or remove the left div and replace it with the right one, which will then shift to the left and occupy the original position of the right div.
This switch should be triggered when the user clicks on the about link.
Here's a snippet of the HTML code:
<div class="nav">
<div class="column c1">
<a href="#">About</a>
</div>
</div>
<div id="feed" class="feed" style="margin-top: 54px;">
<!-- Content for both divs -->
</div>
And here's the corresponding CSS:
.c1 {
max-width: 24%;
}
.column {
position: relative;
float:left;
padding-right: 1%;
width: 585px;
}
/* Additional styling included as well */
The ultimate goal is to achieve a one-page style for the website. While CSS solutions are preferred, suggestions involving jQuery are also welcome.
You can view the full code on CodePen.
Thank you in advance!