SitePoint Sponsor

User Tag List

Results 1 to 10 of 10

Thread: jQuery Help

  1. #1
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,891
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question jQuery Help

    Hello,

    I have a page with two divs laid out side by side.

    In the left div I have a list of months

    In the right div I have 12 divs (one for each month)

    all of those inner divs in the second column are set to not display on startup apart from the first (january).

    How can I make the inner divs show and hide depedning on what month is clicked in the left hand column.

    Only 1 of the inner divs should be shown at any one time.

    Thanks

    Neil

  2. #2
    SitePoint Enthusiast
    Join Date
    Mar 2011
    Location
    Bs. As. - Argentina
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not using JQuery, this can be a way.

    Code JavaScript:
    var mtx = new Array();
    mtxDivs[0]="divId_1";
    mtxDivs[1]="divId_2";
    mtxDivs[2]="divId_3";
    mtxDivs[3]="divId_4";
    mtxDivs[4]="divId_5";
    mtxDivs[5]="divId_6";
    mtxDivs[6]="divId_7";
    mtxDivs[7]="divId_8";
    mtxDivs[8]="divId_9";
    mtxDivs[9]="divId_10";
    mtxDivs[10]="divId_11";
    mtxDivs[11]="divId_12";
     
    function showHideDivs(oDiv)
    {
        var cl = 0;
        for (cl in mtxDivs)
        {  //hiding all divs
            var o = document.getElementById(mtxDivs[cl]);
            o.style.display='none';
        }
     
        oDiv.style.display='block';
    }

    Into "mtxDivs[##]" you should set de ids. of the divs for the first one to the last. Then on the onclick envent of the divs put the "showHideDivs(this)".

    That's should work.


    See you

  3. #3
    Non-Member
    Join Date
    Apr 2004
    Location
    Miami, FL, USA
    Posts
    448
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Expanding on previous example, but using jQuery, you could do this (tested):
    HTML Code:
    <html>
    	<head>
    		<script src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
    		<script>
    		$(document).ready(function() {
    			$(".month").css("display","none");
    			$("#monthLinks a").click(function() {
    				var id = $(this).attr("href");
    				$(".month").css("display","none");
    				$(id).css("display","block");
    			});
    		});
    		</script>
    		<style>
    			.left { width: 50%; float: left }
    			.right { width: 50%; float: right }
    		</style>
    	</head>
    	<body>
    		<div class="left">
    			<ul id="monthLinks">
    				<li><a href="#jan">January</a></li>
    				<li><a href="#feb">February</a></li>
    				<li><a href="#mar">March</a></li>
    				<li><a href="#apr">April</a></li>
    				<li><a href="#may">May</a></li>
    				<li><a href="#jun">June</a></li>
    				<li><a href="#jul">July</a></li>
    				<li><a href="#aug">August</a></li>
    				<li><a href="#sep">September</a></li>
    				<li><a href="#oct">October</a></li>
    				<li><a href="#nov">November</a></li>
    				<li><a href="#dec">December</a></li>
    			</ul>
    		</div>
    		<div id="months" class="right">
    			<div id="jan" class="month">
    				<h1>January</h1>
    			</div>
    			<div id="feb" class="month">
    				<h1>February</h1>
    			</div>
    			<div id="mar" class="month">
    				<h1>March</h1>
    			</div>
    			<div id="apr" class="month">
    				<h1>April</h1>
    			</div>
    			<div id="may" class="month">
    				<h1>May</h1>
    			</div>
    			<div id="jun" class="month">
    				<h1>June</h1>
    			</div>
    			<div id="jul" class="month">
    				<h1>July</h1>
    			</div>
    			<div id="aug" class="month">
    				<h1>August</h1>
    			</div>
    			<div id="sep" class="month">
    				<h1>September</h1>
    			</div>
    			<div id="oct" class="month">
    				<h1>October</h1>
    			</div>
    			<div id="nov" class="month">
    				<h1>November</h1>
    			</div>
    			<div id="dec" class="month">
    				<h1>December</h1>
    			</div>
    		</div>
    	</body>
    </html>

  4. #4
    SitePoint Enthusiast
    Join Date
    Mar 2011
    Location
    Bs. As. - Argentina
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Now i see that i forgot where to "click" it should be somewhere but the Divs itself, :P

    My previous code wont work cause i said to put the "showHideDiv()" on the Divs thats needs to be hide / show.

    I figured that out looking at transio code.

    See you

  5. #5
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,891
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. Could you please explain this line:

    $(id).css("display","block");

  6. #6
    Non-Member
    Join Date
    Apr 2004
    Location
    Miami, FL, USA
    Posts
    448
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's getting the referenced div by id, and changing the CSS for the "display" property to "block" (visible, as a block, which is default for a div).

  7. #7
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,891
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, So I have changed the code to fit in with my page structure and have the following:

    Code JavaScript:
    $(document).ready(function() {
    	$(".birdlist").css("display","none");
    	$("#months a").click(function() {
    		var id = $(this).attr("href");
    		$('#birds').next().css("display", "none");
    		$(id).css("display","block");
    	});
    });

    The month divs do appear when the appropriate month link is clicked but the previous one is not removed which is what I tried to accomplish by using:

    Code JavaScript:
    $('#birds').next().css("display", "none");

    but it obviously doesn't work.

    Any ideas where I am going wrong?

    Thanks

    Neil

  8. #8
    Non-Member
    Join Date
    Apr 2004
    Location
    Miami, FL, USA
    Posts
    448
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No idea how to code it unless I can see the HTML. What's wrong with the HTML I posted for ya?

  9. #9
    Non-Member
    Join Date
    Apr 2004
    Location
    Miami, FL, USA
    Posts
    448
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, actually, try this:
    Code JavaScript:
    $(document).ready(function() {
        $(".birdlist").css("display","none");
        $("#months a").click(function() {
            $(".birdlist").css("display","none");
            var id = $(this).attr("href");
            $(id).css("display","block");
        });
    });

  10. #10
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,891
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok, i'm not at my desktop at the moment but will try it when i get home.

    Thanks


Bookmarks

Posting Permissions

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