====== Toggle div by button with jquery UI ======

  * This example requires jquery UI plugin.
  * JavaScript code finds all element with given prefix and add function runEffect which toggle element with id that is second part of element with prefix.
    * Example: prefix="help", element with id="help-test" gets onclick function which toggle element with id="test".


===== Code =====


  * javascript code
<code javascript>
    <script type="text/javascript">
        $(document).ready(function () {

            $('.ui-state-default').hover(
            function () { $(this).addClass('ui-state-hover'); },
            function () { $(this).removeClass('ui-state-hover'); }
            );

            $('.ui-state-default').click(function () {
                $(this).toggleClass('ui-state-active');
            });


            function runEffect(elementID, effect) {
                $("#" + elementID).toggle(effect);
            }

            function GetHelpContent(element, prefix) {

                var id1 = element.attr("id");
                var re = new RegExp("^" + prefix + "-", "");
                var id2 = id1.replace(re, "");
                return id2;
            }

           var prefix = "help";
            $("div[id|="+prefix+"]").click(function () {
                runEffect(GetHelpContent($(this),prefix), 'blind');
                return false;
            });


        });
	</script>
</code>
  * html code
<code html>
<div class="toggler">
<div id="help-test" class="ui-button ui-state-default ui-corner-all"><span class="ui-icon ui-icon-help"></span></div>
	<div id="test" class="ui-widget-content ui-corner-all">
		<h3 class="ui-widget-header ui-corner-all">Toggle</h3>
		<p>
			Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
		</p>
	</div>
</div>
</code>

===== Resources =====
  * [[http://jqueryui.com/]]