Question

I have Divs show and hide (with an animation) using the following script (I included the jQuery library)

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function ShowHide(){
$("#info").animate({"height": "toggle"}, { duration: 1000 });
}
//]]>
</script>

I activate the showing/hiding with
<input type="reset" name="reset" value="Hide Message"onclick="ShowHide(); return false;" /> or similar (for a text link, I do href="#" onclick="ShowHide(); return false;".

All of that works fine, but I want to know how to make it so I can have a div show with a URL. What I mean is that I want to be able to have users go to example.com/?show=test (or similar) and have the div called “test” show.

It really doesn’t have to use the same script as above. What I mainly want to use it for is to show a Thank you message for filling out a feedback form show on the homepage in a little box.

Thanks in advance for the help. (I can clarify anything if it was confusing)

Answer 1

You could always parse out the ID of the div from the query string, or more simply use a hash instead, i.e., example.com#test. Then you could just do:

$(document).ready(function() {
    var whichDiv = location.hash.split('#')[1];
    $('#' + whichDiv).show();
});

You can always just calls show directly on the location.hash, since the raw value begins with the ‘#’ character anyway:

$(document).ready(function() {
    var whichDiv = location.hash;
    $(whichDiv).show();
});

If you really need to parse out the show parameter:

$(document).ready(function() {
    var whichDiv = $.url.param("show");
    $(whichDiv).show();
});

The above example makes use of this tiny jQuery URL plugin.