I have a div on left and right of the page. Currently the div on the right is being hidden.
I'm trying to use jQuery to fadeout the div that is currently being displayed and replace it by fading in the hidden div.
What am I doing wrong? I followed the example on this similar question.
It should happen when you click the About link in the code snippet:
$("a").on('click', function() {
$("#feed-show").fadeIn();
$(".feed").fadeOut();
});a {
color: rgba(255, 80, 70, 1) !important;
text-decoration: none;
}
.nav a {
font-size: 13px;
color: rgba(255, 80, 70, 1);
text-decoration: none;
font-weight: bold;
}
/* Content ---------------------*/
/* nav */
.nav {
position: fixed;
float: left;
width: 96%;
left: 2%;
margin-left: -2px;
border-bottom: 2px solid rgba(255, 80, 70, 1);
padding-bottom: 18px;
background: white;
z-index: 999;
top: 0px;
padding-top: 18px;
}
.c1 {
max-width: 24%;
}
.column {
position: relative;
float: left;
padding-right: 1%;
width: 585px;
}
/* feed */
.feed {
width: 96%;
left: 2%;
margin-top: 75px;
padding-left: 2px;
}
.c2 {
max-width: 49%;
}
.feed-item {
position: relative;
width: 100%;
height: auto;
padding-bottom: 25px;
padding-top: 2.5%;
}
.feed-show {
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
background: red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">
<div class="column c1">
<a href="#" rel="click">About</a>
</div>
</div>
<div id="feed" class="feed" style="margin-top: 54px;">
<div class="column c2">
<p>
Creatives of Colour (C-oC) is an independent directory that provides you with up to date information on current, and future work of creatives of colour being showcased in the UK. C-oC aims to contribute to the necessary exaltation of talented artists
within the various ethnic minorities within the UK.
</p>
<p>
<a href="#">Find out more about Creatives of Colour..</a>
</p>
</div>
<!-- Show on click -->
<div id="feed-show" class="feed-show" style="margin-top: 54px;">
<div class="column c2">
<p>
Creatives of Colour (C-oC) is an independent directory that provides you with up to date information on current, and future work of creatives of colour being showcased in the UK.
</p>
<p>
<a href="#">Find out more about Creatives of Colour..</a>
</p>
</div>
</div>Here is a codepen
Many thanks!