PDA

View Full Version : Show/Hide Multiple Divs



Abbster22
12-21-2010, 10:36 AM
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 (http://abrielshipley.com/ffi/resources4.html) 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&nbsp;Information</a><br />
<a href="#" name="resource" id="resource2">Automatic&nbsp;401(k)</a><br />
<a href="#" name="resource" id="resource3">Consumer&nbsp;Fraud</a><br />
<a href="#" name="resource" id="resource4">Direct&nbsp;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&nbsp;Adults&nbsp;(20s&nbsp;-&nbsp;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");
});
});
});


Any help is appreciated! :)

vwphillips
12-21-2010, 12:15 PM
<!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" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
.resource {
position: absolute;
margin-left: 400px;
margin-top: -10px;
width: 300px;
height: 300px;
padding-bottom: 120px;
background-Color:#FFFFCC;
}

/*]]>*/
</style></head>

<body>
<div id="resourceLinks">
<a href="#" name="resource" rel="resource1">General&nbsp;Information</a><br />
<a href="#" name="resource" rel="resource2">Automatic&nbsp;401(k)</a><br />
<a href="#" name="resource" rel="resource3">Consumer&nbsp;Fraud</a><br />
<a href="#" name="resource" rel="resource4">Direct&nbsp;Deposit</a><br />
<a href="#" name="resource" rel="resource5">Diversity</a><br />
<a href="#" name="resource" rel="resource6">Women</a><br />
<a href="#" name="resource" rel="resource7">Young&nbsp;Adults&nbsp;(20s&nbsp;-&nbsp;40s)</a>
</div>

<div id="resource1" class="resource">1</div>
<div id="resource2" class="resource">2</div>
<div id="resource3" class="resource">3</div>
<div id="resource4" class="resource">4</div>
<div id="resource5" class="resource">5</div>
<div id="resource6" class="resource">6</div>
<div id="resource7" class="resource">7</div>
<script type="text/javascript">
/*<![CDATA[*/

function ShowOne(o){
var obj=document.getElementById(o.ID);
var as=obj.getElementsByTagName('A');
this.lst=false;
for (var sobj,z0=0;z0<as.length;z0++){
sobj=document.getElementById(as[z0].rel);
if (sobj){
sobj.style.visibility='hidden';
this.addevt(as[z0],'click','Show',sobj);
if (!this.lst){
this.lst=sobj;
}
}
}
if (this.lst){
this.lst.style.visibility='visible';
}
}

ShowOne.prototype={

Show:function(obj){
this.lst.style.visibility='hidden';
this.lst=obj;
this.lst.style.visibility='visible';
return false;
},

addevt:function(o,t,f,p){
var oop=this;
if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p);}, false);
else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p); });
}

}

new ShowOne({
ID:'resourceLinks'
});

/*]]>*/
</script>

</body>

</html>