<div id='_form'> Form Inputs </div> <div id='_preview' style='display: none'> Preview </div> <button id='_toggle'> Toggle </button> <script> window._toggle.onclick = () => previewFormInputs(); // can also do the following instead of the above /* window._toggle.onclick = previewFormInputs; */ function setElementVisibility(element, visible) { element.style.display = visible ? 'inherit' : 'none'; } let _previewVisible = false; function previewFormInputs() { _previewVisible = !_previewVisible; setElementVisibility(window._form, !_previewVisible); setElementVisibility(window._preview, _previewVisible); } </script>Live: https://jsfiddle.net/sewa4jh1/1/
The code above can be improved by combining both the action and the state _previewVisible
<div id='_form'> Form Inputs </div> <div id='_preview' style='display: none'> Preview </div> <button id='_toggle'> Toggle </button> <script> window._toggle.onclick = () => previewFormInputs(); // can also do the following instead of the above // _stats.onclick = previewFormInputs; function setElementVisibility(element, visible) { element.style.display = visible ? 'inherit' : 'none'; } const previewFormInputs = (function () { let previewVisible = false; return function () { previewVisible = !previewVisible; setElementVisibility(window._form, !previewVisible); setElementVisibility(window._preview, previewVisible); } })(); </script>Live: https://jsfiddle.net/sewa4jh1/3/
No comments:
Post a Comment