I have a script that will change the opacity of elements when they are not selected. This part of the script works fine. However, I also want a hidden div to appear when a certain element is clicked. I have this planned so that when the first element (is this case a picture) is clicked, the first hidden div will appear, when the second picture is clicked, the second hidden div appears. I’m thinking it might be more useful to use classes or something like checking the opacity for a given ID on the div and then if it’s < 1 showing the div. The problem with that is, I don’t know how to keep only one div visible on the page at one. I’m tried a few things and right now this script doesn’t work, but it’s kinda close.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<style>
.opac {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
border:thick;
}
.hidden{
display:none;
}
</style>
<script>
$(document).ready(function(){
$('a.images').(function(){
// Make all images (except this) transparent
$('a.images').not(this).stop().animate({opacity: 0.15}, 300);
// Make this opaque
$('a.images').each(function(e){
$(this).bind('click', function(e){
var hideIs = $(this).index();
$('.hidden').eq(hideIs).show(250);
});
$(this).stop().animate({opacity: 1.0}, 300);
});
});
});
</script>
</head>
<body>
<div id="images">
<a class="images" href="#"><img src="../appalachia.jpg" height="133" /></a>
<div class="hidden" >text here</div>
<a class="images" href="#"><img src="../appalachia.jpg" height="133" /></a>
<div class="hidden">second text here</div>
<a class="images" href="#"><img src="../appalachia.jpg" height="133" /></a>
<div class="hidden">third text here
<a class="images" href="#"><img src="../appalachia.jpg" height="133" /></a>
<div class="hidden" >fourth text here</div>
</div>
</body>
</html>
Are you sure you don’t just want to use a tabs plugin? This is the sort of behavior they are designed to accomplish, and they have all of these effects built in already.
http://jqueryui.com/demos/tabs/
http://flowplayer.org/tools/tabs/index.html
The jquery tools tabs plugin is only 0.9 kb!