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”.

• javascript code

    <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>

• html code

<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>

• http://jqueryui.com/