I am right now trying to hide six divs while showing only one of the divs. I've tried JavaScript and in jQuery, but nothing seems to work! Click here to get to the website.
I would like to know if it has to do with my CSS, jQuery, or the
HTML. Or is there an easier way of doing this?
HTML:
<div id="resourceLinks">
<a href="#" name="resource" id="resource1">General Information</a><br />
<a href="#" name="resource" id="resource2">Automatic 401(k)</a><br />
<a href="#" name="resource" id="resource3">Consumer Fraud</a><br />
<a href="#" name="resource" id="resource4">Direct Deposit</a><br />
<a href="#" name="resource" id="resource5">Diversity</a><br />
<a href="#" name="resource" id="resource6">Women</a><br />
<a href="#" name="resource" id="resource7">Young Adults (20s - 40s)</a>
</div>
<div id="resource1></div>
<div id="resource2></div>
<div id="resource3></div>
<div id="resource4></div>
<div id="resource5></div>
<div id="resource6></div>
<div id="resource7></div>
CSS:
#resource1, #resource2, #resource3, #resource4, #resource5, #resource6, #resource7 {
position: absolute;
margin-left: 400px;
margin-top: -10px;
width: 300px;
padding-bottom: 120px;
}
#resourceLinks {
position: fixed;
margin-left: -450px;
z-index: 3;
margin-top: 180px;
font-size: 16px;
}
jQuery:
$(document).ready(function(){
$('#resourceLinks a').click(function (selected) {
var getName = $(this).attr("id");
var projectImages = $(this).attr("name");
$(function() {
$(".resource").hide().removeClass("current");
$("#" + projectImages ).show("normal").addClass("current");
});
});
});
