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 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:

Code:

    <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:

Code:

    #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:

Code:

    $(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

Code:

<!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>

Thread: Show/Hide Multiple Divs

Thread Tools

Search Thread

Show/Hide Multiple Divs

Bookmarks

Bookmarks

Posting Permissions