JQuery / JavaScript - Accessing methods
<p>I'm sort of new to JavaScript programming and I do not understand method access. I have a bit of code that looks like the following:</p>

<pre><code>(function ($) {
    $.fn.myCustomUIElement = function (options) {
        var props = { value: 1  }; 

        return this.each(function () { initialize(); }); 
        function initialize() { /* initialization code */  }

        function toggle() { if (props.value == 1) { props.value = 0; } else { props.value = 1; } }
    };
})(jQuery);
</code></pre>

<p>My HTML Page has an anchor tag that is responsible for toggling the state of myCustomUIElement. The HTML that shows this and initializes myCustomUIElement is shown here:</p>

<pre><code>&lt;div id="myElement"&gt;&lt;/div&gt;        
&lt;a href="#" onclick="toggleFromHtml('myElement');"&gt;toggle&lt;/a&gt;

&lt;script type="text/javascript"&gt;
    $(document).ready(function () {
        $("#myElement").myCustomUIElement();
    });

    function toggleFromHtml(e) {
        $("#" + e).toggle();
    }
&lt;/script&gt;
</code></pre>

<p>My problem is, the toggle method in the myCustomUIElement object is never called. I can call the toggleFromHtml just fine. How do I access a method that is defined in JavaScript as shown above? Is there a way? Please note, I do not want to re-write the JavaScript shown in the first snippet if possible. If possible, I want to call the method from the toggleFromHtml method.</p>

<p>Thank you!</p>
