title: How to access a variable passed in through JavaScript function
body: <p>I have the following button setup:</p>
  
  <pre><code>&lt;div class="BlogManagementDiv"&gt;
       &lt;button type="button" onclick="fnToggleBox(AddcategoryDiv)"&gt;Add Category&lt;/button&gt;                                                    
          &lt;div id="AddcategoryDiv" class="BlogManagementcontainer"&gt;
  ...
          &lt;/div&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p>Note the onclick does this:</p>
  
  <pre><code>fnToggleBox(AddcategoryDiv)
  </code></pre>
  
  <p>Where it is passing in a reference to the div below:</p>
  
  <pre><code>AddcategoryDiv
  </code></pre>
  
  <p>I then access the element in the funciton like this:</p>
  
  <pre><code>    function fnToggleBox(element) 
      {
          if (!$('#'+element.id).is(":visible")) {
              $('#' + element.id).show();
          }
          else {
              $('#' + element.id).hide();
          }
      }
  </code></pre>
  
  <p>which I can see is completeley ridiculous, as it already has the element, and there is no need to acces it in this way.</p>
  
  <p>My question is, how to properly access this variable using JQuery.</p>
  
  <p>I know how to do using JavaScript, but am trying to do so using JQuery.</p>
  
  <p>I have tried:</p>
  
  <pre><code>function fnToggleBox(element) 
      {
          if (!element).is(":visible")) {
              element.show();
          }
          else {
              element.hide();
          }
      }
  </code></pre>
  
  <p>and </p>
  
  <pre><code>function fnToggleBox(element) 
      {
          if (!$element).is(":visible")) {
              $element.show();
          }
          else {
              $element.hide();
          }
      }
  </code></pre>
  
  <p>but they do not work.</p>
  
  <p>I have googled, but cannot find the answer.</p>