Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Jan 2010
    Posts
    35
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Question Show/Hide Multiple Divs

    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!
    Last edited by Abbster22; 12-21-2010 at 10:39 AM. Reason: Forgot to include website link.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,858
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    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.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    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 which might point you in the right direction.

  • #4
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    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

  • #5
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    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.

    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">
    <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>
    Last edited by DanInMa; 12-22-2010 at 04:16 AM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •