How can I show a div, then hide the other divs when a link is clicked?

I am right now trying to hide six di开发者_Go百科vs 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&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");
    }); 
  }); 
}); 

---

How about something like this one

<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 class="resource" id="resource1_info"></div> 
<div class="resource" id="resource2_info"></div> 
<div class="resource" id="resource3_info"></div> 
<div class="resource" id="resource4_info"></div> 
<div class="resource" id="resource5_info"></div> 
<div class="resource" id="resource6_info"></div> 
<div class="resource" id="resource7_info"></div> 


$(document).ready(function(){
     $("div.resource:gt(0)").hide();  // to hide all div except for the first one
     $('#resourceLinks a').click(function(selected) {
        var getID = $(this).attr("id");      
        var projectImages = $(this).attr("name");      

        $("div.resource").hide();       
        $("#" + getID + "_info" ).show();    
    });  
});  

---

I think you are trying to achieve the accordian effect.. Have a look here:

http://jquery.bassistance.de/accordion/demo/

Its and existing jQuery plugin.

---

Given:

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

<div class="resource" id="resource1">1</div>
<div class="resource" id="resource2">2</div>
<div class="resource" id="resource3">3</div>
<div class="resource" id="resource4">4</div>
<div class="resource" id="resource5">5</div>
<div class="resource" id="resource6">6</div>
<div class="resource" id="resource7">7</div>

You can:

$(function() {
    var $resLinks = $('#resourceLinks a'),
        $res = $('.resource');

    // Hide all but first
    $res.not(':first').hide();
    $resLinks.first().addClass('current');

    $resLinks.click(function() {
        var $elm = $(this),
            childId = $elm.data('child');

        // Hide all (only one is visible, though)
        $res.hide();

        // Reset and set .current class on links
        $resLinks.removeClass('current');
        $elm.addClass('current');

        // Show related
        $('#' + childId).show();

        return false;
    });
});

Update #1: Code is tested.

Update #2: Showing first on init.

---

Using classNames

<div id="resourceLinks">
      <a href="#" class="resource1">General Information</a><br />
      <a href="#" class="resource2">Automatic</a><br />
      <a href="#" class="resource3">Consumer Fraud</a><br />
      <a href="#" class="resource4">Direct Deposit</a><br />
      <a href="#" class="resource5">Diversity</a><br />
      <a href="#" class="resource6">Women</a><br />
      <a href="#" class="resource7">Young</a>
</div>
<div class="resources">
    <div id="resource1" class="current"></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>
</div>

jQuery:

$(document).ready(function(){
     $('#resourceLinks a').click(function() {
        $('div.resources div').hide().removeClass('current');       
        $("#" + $(this).attr('className')).show().addClass('current');
    });  
});