title: Breaking jQuery/JS code off into functions from .click()
body: <p>I am using a JQuery cookie library to hide/show elements and then remember the status when the page is reloaded.  The working code looks for elements with id #num0 and toggles the next element, and it looks like this:</p>
  
  <pre><code>if(Cookies('divShown0') == 'true') {  //defaults to hidden
      $('#num0').next().show(); // Show if cookie there and 'true'
  }
  $('#num0').click(function() {
    $(this).next().toggle();
    if(Cookies('divShown0') == 'true') {
      Cookies.set('divShown0', 'false'); // Remember it was hidden
    }
    else {
      Cookies.set('divShown0', 'true');  // Remember it was shown
    }
  });
  </code></pre>
  
  <p>I have multiple of these, each identified by a different #num and stored as a different divShown number.  So far I have just added a new code block with new numbers, but obviously this takes up a lot of space.  I put the first if() statement into a for() loop, no problem.  The second part I broke into a function, toggleShown(num), so I can call <code>$('#num0').click(toggleShown(0));</code>, but this is not working.  I suspect that something about the $(this) element isn't properly identifying the next element, but I really don't know.</p>
  
  <pre><code>function toggleShown(num)
    {
     $(this).next().toggle();
     if(Cookies('divShown' + num) == 'true') {
       Cookies.set('divShown' + num, 'false'); // Remember it was hidden
     }
     else {
       Cookies.set('divShown' + num, 'true');
     }
    }
  </code></pre>
  
  <p>I don't really do Javascript or JQuery, mostly RoR but I am trying to hack this together.  Any thoughts on what I am screwing up?</p>