Hiding/showing links with opacity
http://stackoverflow.com/questions/14175337/hide-clickable-links-inside-div-when-opacity-is-0
HTML
<div class="boxes workshops wrapl">
<a href="#"><div id="showw1" class="workshops-button lfloat">Show it</div></a>
</div>
<!--2-->
<div class="boxes exhibitions">
<a href="#" id="showex1" class="exhibitions-button lfloat">Show it</a>
</div>
<!--3-->
<div class="boxes events wrapalphabet">
<a href="#"><div id="showe1" class="events-button lfloat">Show it</div></a>
</div>
<!--4-->
<div class="boxes events ">
<a href="#" id="showe2" class="events-button lfloat">Show it</a>
</div>
<!--5-->
<div class="boxes lectures">
<a href="#" id="showl1" class="lectures-button lfloat">Show it</a>
</div>
<div class="dummy wrapalphabet"></div>
<!--6-->
<div class="boxes events ">
<a href="#" id="showe3" class="events-button lfloat">Show it</a>
</div>
<div class="dummy"></div>
<!--7-->
<div class="boxes events wrapalphabet">
<a href="#" id="showe4" class="events-button lfloat">Show it</a>
</div>
<div class="dummy"></div>
<!--8-->
<div class="boxes workshops wrapalphabet">
<a href="#" id="showw2" class="workshops-button lfloat">Show it</a>
</div>
<!--9-->
<div class="boxes hospitality">
<a href="#" id="showh1" class="hospitality-button lfloat">Show it</a>
</div>
<!--10-->
<div class="boxes events ">
<a href="#" id="showe5" class="events-button lfloat">Show it</a>
</div>
<div id="navi">
<a href="#"><div id="t0" class="home lfloat"><span>Home</span></div></a>
<a href="#"><div id="t1" class="lfloat"><span>Events</span></div></a>
<a href="#"><div id="t2" class="lfloat"><span>Workshops</span></div></a>
<a href="#"><div id="t3" class="lfloat"><span>Lectures</span></div></a>
<a href="#"><div id="t4" class="lfloat"><span>Exhibitions</span></div></a>
<a href="#"><div id="t5" class="lfloat"><span>Hospitality</span></div></a>
<a href="#"><div id="t6" class="lfloat"><span>Gallery</span></div></a>
<a href="#"><div id="t7" class="lfloat"><span>Sponsors</span></div></a>
</div>
CSS
.clrflt {
clear: both;
}
.lfloat {
float:left;
}
#navi {
height:auto;
width:auto;
}
#t0, #t1, #t2, #t3, #t4, #t5, #t6, #t7{
padding:0 !important;
border:0 !important;
}
.hack{
padding:10px 10px 0 230px !important
}
#t0, #t1, #t2, #t3, #t4, #t5, #t6, #t7{
display:block;
float:left;
width:auto;
height:auto;
cursor:pointer;
font-size:12px;
color:#000;
text-align:center;
line-height: 1.2em;
}
span{
position:relative;
top:-5px
}
.wrapr{
margin:2px 34px 2px 2px !important;
}
.wrapl{
margin:2px 2px 2px 34px !important;
}
.wrapalphabet{
margin: 2px 5px 2px 2px !important
}
.dummy {
float:left;
position:relative;
overflow:hidden;
width:60px;
height:60px;
margin:2px;
background:none;
}
.boxes, .events, .exhibitions, .gallery, .sponsors, .hospitality, .workshops, .lectures {
background:#333;
float:left;
position:relative;
overflow:hidden;
width:60px;
height:60px;
margin:2px;
box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
-moz-box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
-webkit-box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
}
.events-button, .workshops-button, .gallery-button, .sponsors-button, .hospitality-button, .lectures-button, .exhibitions-button {
color: #FFFFFF;
opacity:0.0;
display: block;
font-size: 14px;
font-weight: 300;
text-align: center;
width: 100%;
}
JavaScript
var isHome = true;
$(function () {
$("#navi a").click(function() {
c = $(this).text().toLowerCase();
isHome = c=="home";
if (isHome){
$('.events-button, .workshops-button, .gallery-button, .sponsors-button, .hospitality-button, .lectures-button, .exhibitions-button').animate({opacity:0.0},500);
$(".boxes").animate({opacity: 1.0}, 500 );
$(".boxes a").hide();
} else {
$('.' + c).animate({opacity: 1.0}, 500 );
$('.' + c + "-button").animate({opacity: 1.0}, 500 ).addClass('activehack');
$('.activehack').not('.' + c + "-button").animate({opacity: 0.0}, 500 );
$('.boxes a').hide();
$('.boxes').not('.' + c).animate({opacity: 0.3}, 500 );
}
$('.' + c + ' a').show();
});
});