jQuery Help

JavaScript
1

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

Not using JQuery, this can be a way.


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

3

Expanding on previous example, but using jQuery, you could do this (tested):


<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

Now i see that i forgot where to “click” it should be somewhere but the Divs itself, :stuck_out_tongue:

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

5

Thanks. Could you please explain this line:

$(id).css(“display”,“block”);

6

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

Ok, So I have changed the code to fit in with my page structure and have the following:

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

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

but it obviously doesn’t work.

Any ideas where I am going wrong?

Thanks

Neil

8

No idea how to code it unless I can see the HTML. What’s wrong with the HTML I posted for ya?

9

Well, actually, try this:


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

ok, i’m not at my desktop at the moment but will try it when i get home.

Thanks