The Project

In one of my projects, I thought it would be cool to have a drop down select box trigger a slide down for the results, then slide up and slide back down when a new choice was selected. Seemed pretty easy, but when I got into it, it wasn’t as easy as I thought at first. But in all reality it turned out to be super easy.

I did some digging around to figure out how to tell if my div container (the one that would hold all the results) was visible or not, maybe I should just read the entire JQuery documentation – HA! Instead I turned to google and found that you can check for :hidden.

$("#div-id").is(":hidden");

So I can base my logic on that, if it’s hidden do this or if it’s not do this…

That was perfect, now it was just a matter of having it do exactly what I wanted. So if the div wasn’t hidden, I needed to hide then show it again with the new results. Or if it was hidden, show the results.

function load_branch() {
	$("#br-loader").html("");
	if (!$("#branch_info").is(":hidden")) {
		$("#branch_info").slideUp("slow",function() {
			branch = $("#br_sel :selected").val();

			if (!branch) {
				alert("Please choose a branch");
				$("#br-loader").html("");
			} else {
				//go get the branch

				div = "#branch_info"
				$.post("../site_core/libs/ajax_load_branch.php", {
					branch_code: branch,
					div: div
				}, function(data){
					$("#br-loader").html("");

					if ($("#branch_info").is(":hidden")) {
						$("#branch_info").html(data.html);
						$("#branch_info").slideDown(2500);
					}
				}, "json");
			}
		});

	} else {
		branch = $("#br_sel :selected").val();

		if (!branch) {
			alert("Please choose a branch");
			$("#br-loader").html("");
		} else {
			//go get the branch

			div = "#branch_info"
			$.post("../site_core/libs/ajax_load_branch.php", {
				branch_code: branch,
				div: div
			}, function(data){
				$("#br-loader").html("");

				if ($("#branch_info").is(":hidden")) {
					$("#branch_info").html(data.html);
					$("#branch_info").slideDown(2500);
				}
			}, "json");
		}
	}
}

So let’s break it down a little bit, and I’ll explain what I’m doing here.

It’s a very simple system, you come to the page and you are presented with a drop down selection, you make a choice and that action triggers this function. So the first thing it will do is check if it’s hidden or not. If it’s hidden, then it will run the second section of the function – slideDown with the data gathered from the json results. If it is not hidden, then it slides it up and then back down with the new data.

So the first bit checked if it’s hidden or not. If it’s not hidden, then it will slide it up .

if (!$("#branch_info").is(":hidden")) {
		$("#branch_info").slideUp("slow",function() {

Now pay special attention to that function after the “slow”, I’ve recently really gotten into using these – I dunno, are they called “callback” functions? Really I think of them as run something afterwards, so I run the slideUP, but I want something to happen after that as part of the process.

So after sliding up, I go grab the value of the new selection.

branch = $("#br_sel :selected").val();

The br-loader is that trendy little loader gif (I’m using a spinning thing), but I need to hide it under certain conditions, so if they choose wrong it will disappear – and now that I think about it, I wonder if hiding it and showing it might be better? Anywho moving on. If they make the right choice then I go out and grab the new data and apply it then slide it down.

div = "#branch_info"
$.post("../site_core/libs/ajax_load_branch.php", {branch_code: branch,	div: div}, function(data){
	$("#br-loader").html("");
	if ($("#branch_info").is(":hidden")) {
		$("#branch_info").html(data.html);
		$("#branch_info").slideDown(2500);
	}
}, "json");

I think I might be redundant on checking if it’s hidden again, but you never know – right?

The rest of it is the almost the same, except it just slides down when it’s hidden, following the same logic. When they make a choice it gets the data and slide it down.

else {
		branch = $("#br_sel :selected").val();

		if (!branch) {
			alert("Please choose a branch");
			$("#br-loader").html("");
		} else {
			//go get the branch

			div = "#branch_info"
			$.post("../site_core/libs/ajax_load_branch.php", {
				branch_code: branch,
				div: div
			}, function(data){
				$("#br-loader").html("");

				if ($("#branch_info").is(":hidden")) {
					$("#branch_info").html(data.html);
					$("#branch_info").slideDown(2500);
				}
			}, "json");
		}
	}

Caveats, Disclaimers

Well there you have it, a “toggled” slider that can detect it’s status and act accordingly. I make no attempts to pass this off as the correct or perfect way to handle this – it probably isn’t, but it works well and it’s cross browser compatible. As a caveat, it’s javascript dependant, as they have to have javascript enabled and it does not degrade. But for this project javascript is a must, plus most modern desktop browsers are set to have it on as a default.

This is just a function that I built as I’m learning JQuery/Javascript.