How can I show a div, then hide the other divs when a link is clicked?
Posted
by
Abriel
on Stack Overflow
See other posts from Stack Overflow
or by Abriel
Published on 2010-12-21T10:34:30Z
Indexed on
2010/12/21
10:54 UTC
Read the original article
Hit count: 300
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");
});
});
});
© Stack Overflow or respective owner
