Problem using variable within child selector in the hide effect

Problem using variable within child selector in the hide effect

I'll skip my use case because it's a long and unnecessary story.  Suffice it to say that I'm trying to avoid having a dedicated click function for each of the many 'more' links on my page.  I think I can get down to one 'more' click function and one 'less' click function if I can pass the id of the parent div in as a variable.

I'm using the child selector (http://api.jquery.com/child-selector/) within a hide effect (http://jqueryui.com/demos/hide/).  It works fine when I hard-code the id of the parent div.  But when I pass the parent div name in as a variable it fails silently.  I have tried every different syntax that I can come up with.

Please help.

Here's a simple working (non-working, really) test page I whipped up.

  1. <html>
  2. <head>
  3. <title>jQuery UI .hide test</title>
  4. <!-- I'm using the current jQuery and jQuery UI builds.
  5.     Everything is enabled in my jQuery UI build -->
  6. <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
  7. <script type="text/javascript" src="js/jquery-ui-1.8.1.custom.min.js"></script>
  8. <script type="text/javascript" language="JavaScript">
  9. $(document).ready(function(){
  10.     // click event to hide by hard-coded parentDiv name
  11.     $("#direct").click(function () {
  12.         $('#parentDiv > div.hideme').hide("blind", {}, 1000);
  13.         return false;
  14.     });
  15.     // click event to hide by variable that contains the ParentDiv name
  16.     $("#vari").click(function () {
  17.         var hider = "#parentDiv";
  18.         $('hider > div.hideme').hide("blind", {}, 1000);
  19.         return false;
  20.     });
  21.    
  22.     // click event to un-hide by hard-coded element name
  23.     $("#unhide").click(function () {
  24.         $("#foo").show("blind", {}, 1000);
  25.         return false;
  26.     });
  27. });
  28. </script>
  29. </head>
  30. <body>
  31. <div id="parentDiv">
  32. <p> Going to test hiding this element:</p>
  33. <div id="foo" class="hideme">Hide Me!</div>
  34. </div>
  35. <br><br>
  36. <a href="#" id="direct">This link is hard-coded to the parentDiv name.</a>
  37. <br>
  38. <a href="#" id="vari">This link uses a variable that contains the parentDiv name.</a>
  39. <br>
  40. <a href="#" id="unhide">This link unhides the div, again based on the hard-coded vid name.</a>
  41. </body>
  42. </html>

Test it and you will see that the links on lines 36 and 40 hide and unhide as expected, but the link on line 38 does not.

What am I missing?

Thanks in advance!