simple jQuery show/hide help: using function parameters

using function parameters in simple jQuery show/hide

[jacosta000]

Hello,

I'm trying to do a simple show/hide using jQuery. I initially created this functionality using scriptaculo.us, but I want to start migrating everything over. Please bear with me, as I'm very new to jQuery. I just purchased jQuery in Action, but haven't been able to read much of it yet.

So here's what I have currently using the scriptaculo.us stuff:

---I have an image with an onclick event. That onclick event runs a function in an external javascript file. the function call looks like this:

expcon('DIV_TO_SHOW/HIDE', document.getElementById('DIV_TO_SHOW/HIDE').style.display, 'ID_OF_IMAGE');

---The actual function looks like this:

function expcon(divID, disp, imgLink) { 
 if (disp=="none"){
 new Effect.SlideDown(divID);
 document.getElementById(imgLink).src="/images/lm2.png";
 }else{
 new Effect.SlideUp(divID);
 document.getElementById(imgLink).src="/images/lm1.png";
 }
}

So I figured that all i would have to do is just modify the actual expcon function with jQuery show/hide code, but I'm apparently not doing it correctly. I tried something like this:
$(divId).show(); instead of the new Effect.SlideDown(divID);

I think the issue is either related to the way I'm referencing the function parameters, or the fact that my function call is in the body of the document(apparently that's a no-no in jQuery?). Like I said, I'm still new to this stuff, so I'm still unsure about how the syntax works yet. If anyone can provide me with some direction on this, that would be awesome.

[Receptional Andy]

I'm not totally clear on what you're trying to do, but you should be able to dramatically simplify the code with jquery. Do you have one image or several?

Jquery also has a slideDown function. Let's say you had an image with an ID of "img". You could get it to slide a div with an ID of "div" as below:

// trigger the function when clicking on #img
  $("#img").click(function () {
// check visibility
   if ($("#div").is(":hidden")) {
// it's hidden - show it
    $("#div").slideDown("slow");
   } else {
// it's not hidden - slide it down
    $("#div").hide();
   }
  });

If you want to uses this without knowing the ID of the div or image beforehand you can use "this" to get attributes of the element that is being manipulated - e.g. the ID, parent elements etc. In this way you could call the same function with every image, without having to supply parameters as you do with your current function.

[jacosta000]

Thanks for the speedy response!
I'd like to put the show/hide functionality in an external js file, if it's possible. I'm not sure how I can do that. If I can do that, how can I leverage the 'this' pointer, or is there a way to use function parameters like in my previous attempt?
Also, just for a little background... I have a list of images, each one shows/hides the div below it. So each image and each div that the images open have their own IDs.

Thanks again!

[Receptional Andy]

You can include the function in an external file easily enough. If you just want to show a div directly below the image, then take a look at next [docs.jquery.com].

It sounds to me like a good approach would be to give the images a class (let's say "toggle") and get clicks on an image with that class to reveal the next div (or just the next element if t here's nothing in between).

Something like the below (totally untested, likely broken):

// run the function below once the DOM is ready
$(document).ready(function() {
// trigger the function when clicking on #img
$(".toggle").click(function () {
// check visibility
if ($(this).next().is(":hidden")) {
// it's hidden - show it
$(this).next().slideDown("slow");
} else {
// it's not hidden - slide it down
$(this).next().hide();
}
}); 
}); 
HTML:
<img class="toggle"/>
<div>Hidden content</div>

Don't forget the jquery docs [docs.jquery.com] either!

[jacosta000]

i think i understand. It's hard to change my thinking to not want to add events to the objects themselves within the body of the document.
In your example above, are the names of the functions 'ready' and 'click'? or are there no function names?

I'll give it a shot. Thanks for your help!

[Receptional Andy]

I can see the confusion about what is a function or isn't. There isn't a name for the functions comparable to your original expcon(). Instead, there are behaviours attached to varous events, e.g.

$(document).ready(function()

These things happen when the DOM is ready.

$(".toggle").click(function () {

These things happen when a element with a class of "toggle" is clicked.

I'm sure my terminology is not great, as I've learned what little JS I know in practical uses.

change my thinking to not want to add events to the objects themselves within the body of the document

For me, this is a key part of unobtrusive javascript, and one reason I like jquery. I write a document, and then worry about the added javascript functionality afterwards - usually without having to change the HTML at all. And of course, even if the javascript needs to change, the HTML doesn't.