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