How can I show a div, then hide the other divs when a link is clicked?
- by Abriel
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");
});
});
});
