...

View Full Version : Show/Hide Multiple Divs



Abbster22
12-21-2010, 11:38 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! :)

abduraooft
12-21-2010, 11:44 AM
Your markup is invalid. You can't have the same value for the id attribute on multiple element, inside a document.

PS: name attribute on all elements except the form input elements (like input, select, textarea) is deprecated.

SB65
12-21-2010, 04:49 PM
Your jQuery looks a bit strange as well - you are using the document ready call twice, and I'm not clear what your 'selected' argument is trying to do.

If you have your links separated in your html from the divs you're trying to show dependent on those links, it might be easier to use eq() and index(). There's a similar thread here (http://www.codingforums.com/showthread.php?t=210500) which might point you in the right direction.

DanInMa
12-22-2010, 04:57 AM
Im working on something now. but first a few things.

1. you can't use the same ID twice in a document.

2. you can't use the same name twice in a document ( use a class)

3. $(".resource") targets elements with a class of resource, i wasnt sure what you were trying to do there.

4. the second set of div's are all missing closing quotations.

5. you don't have to encode single spaces, you only need to use things like &nbsp; when trying to put in more spaces, but not the recommended way to do things ( use css to style your content not html markup)

6. The <br /> 's after the A links are unneeded markup. All you have to do is add display:block to the css for your A links ( again, ..use css to style your content not html markup)


that being said ill try to post something in a few

DanInMa
12-22-2010, 05:12 AM
OK here you go.
Also since the switching function isn't needed until the page is done loading, you really don't need it in the head in a dom ready wrapper like this. you should add it as a normal script just before the closing </body> tag. In this scenario dom ready really isn't important.

oh also you should always use event.preventDefault(); when overriding the default function of an A link.

oh yeah and also what's up with the -450 px left margin on #resourceLinks ? I didn't really get what you were doing there either.



<!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>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.resource {
position: absolute;
margin-left: 400px;
width: 300px;
padding-bottom: 120px;
border: thin solid #999999;
display: none;
}
.current {
display: block;
}

#resourceLinks {
position: fixed;
z-index: 3;
margin-top: 180px;
font-size: 16px;
height: 300px;
width: 300px;
border: thin solid #333333;
}
#resourceLinks a {
display:block
}
-->
</style>
<script language="JavaScript">
<!--
$(document).ready(function() {
$('#resourceLinks a').click(function (event) {
event.preventDefault();
var projectImages = $(this).attr("name");
$(".resource").hide().removeClass("current");
$("#" + projectImages ).show().addClass("current");
});
});
//-->
</script>
</head>

<body>
<div id="resourceLinks">
<a href="#" name="resource1" id="r1">General Information</a>
<a href="#" name="resource2" id="r2">Automatic 401(k)</a>
<a href="#" name="resource3" id="r3">Consumer Fraud</a>
<a href="#" name="resource4" id="r4">Direct ;Deposit</a>
<a href="#" name="resource5" id="r5">Diversity</a>
<a href="#" name="resource6" id="r6">Women</a>
<a href="#" name="resource7" id="r7">Young Adults (20s - 40s)</a>
</div>

<div id="resource1" class="resource current">f</div>
<div id="resource2" class="resource">ff</div>
<div id="resource3" class="resource">fff</div>
<div id="resource4" class="resource">ffff</div>
<div id="resource5" class="resource">fffff</div>
<div id="resource6" class="resource">fffffff</div>
<div id="resource7" class="resource">ffffffff</div>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum