Hello there, I have a specific requirement that I need help with...
In my layout, I have 3 links placed in 3 columns within a single row. Underneath, there is another row containing 1 column with 3 div elements inside it. My question is: How can I achieve a fade in/fade out effect for these divs when the links are clicked?
- Initially, all the content within #info... is hidden.
- When Link 1 is clicked, #info-first fades in. Subsequently, if Link 2 is clicked, #info-first fades out and #info-second fades in, and so on for all the Links.
- There should also be an option to hide all the #info-... content and revert back to the initial state (all hidden).
For a simple demonstration, please check this JSFiddle link.
UPDATE: SOLUTION
Credits to Eduardo for providing the final solution. You can view it on this JSFiddle page.
HTML:
<div id="banner-content-wrap">
<div class="banner-text"><span>Awesome</span> slogan goes here. <span>Very cool</span> indeed.
<br/>
<div id="explain">At the start, all #info... content is hidden. Clicking on Link 1 makes #info-first appear. Subsequent clicks on other Links control the fading in and out of corresponding info sections.</div>
<div class="banner-links">
<table border="1">
<tr class="first">
<td class="first">about</td>
<td class="second">about</td>
<td class="third">about</td>
</tr>
<tr class="second">
<td class="first><a href="#">LINK 1</a></td>
<td class="second"><a href="#">LINK 2</a></td>
<td class="third"><a href="#">LINK 3</a></td>
</tr>
<tr class="third">
<td colspan="3">
<div id="info">
<div class="info-first">Link 1 triggers #info-first visibility
<br/>
<br/><a href="#">HIDE #info-first</a>
</div>
<div class="info-second">Clicking Link 2 reveals #info-second details
<br/>
<br/><a href="#">HIDE #info-second</a>
</div>
<div class="info-third">Link 3 unveils #info-third information
<br/>
<br/><a href="#">HIDE #info-third</a>
</div>
</div>
</td>
</tr>
</table>
</div>
</div>
</div>
CSS:
#banner-content-wrap {
position: absolute;
top: 25%;
width: 960px;
right: 50%;
margin-right: -480px;
}
#explain {
text-align: center;
font-size: 12px;
color: #000;
}
.banner-text {
text-align: center;
position: absolute;
height: 80px;
width: 950px;
overflow: hidden;
padding: 0;
overflow: visible;
font-size: 36px;
font-family:'Berlin Sans FB';
color: #fff;
text-shadow: 0px -1px 8px rgba(0, 0, 0, 0.33);
}
.banner-text span {
color: #000;
}
.banner-links table {
width: 400px;
margin-left: auto;
margin-right: auto;
padding-top: 25px;
border-collapse:collapse;
}
.banner-links tr.first td.first {
text-align: center;
padding-right: 50px;
}
.banner-links tr.first td.second {
text-align: center;
}
.banner-links tr.first td.third {
text-align: center;
padding-left: 50px;
}
.banner-links tr.first {
font-size: 10px;
font-family:'Verdana';
color: #000;
text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.33);
opacity: 0.75;
-webkit-transition: 0.5s; /* For Safari 3.1 to 6.0 */
transition: 0.5s;
}
.banner-links tr.second td.first {
text-align: center;
padding-right: 50px;
}
.banner-links tr.second td.second {
text-align: center;
}
.banner-links tr.second td.third {
text-align: center;
padding-left: 50px;
}
.banner-links tr.second {
line-height: 24px;
}
.banner-links tr.second a {
text-transform: uppercase;
font-size: 18px;
font-family:'Verdana';
color: #000;
text-shadow: 0px -1px 8px rgba(0, 0, 0, 0.33);
opacity: 0.75;
-webkit-transition: 0.5s; /* For Safari 3.1 to 6.0 */
transition: 0.5s;
}
.banner-links tr.second a:hover {
opacity: 0.95;
}
.banner-links tr.second td.first a:hover {
color: #ff0000;
}
.banner-links tr.second td.second a:hover {
color: #34b700;
}
.banner-links tr.second td.third a:hover {
color: #004eb7;
}
.banner-links tr.third td {
background: transparent;
width: 100%;
}
.banner-links #info {
font-size: 12px;
font-family:'Verdana';
text-align: left;
background: rgba(255, 255, 255, 0.33);
}
.banner-links .info-first {
background: #ff0000;
padding: 10px 10px 10px 10px;
}
.banner-links .info-second {
background: #34b700;
padding: 10px 10px 10px 10px;
}
.banner-links .info-third {
background: #004eb7;
padding: 10px 10px 10px 10px;
}