JSFiddle - React, Tailwind, and code Playground

by Lacuna Software

HTML

<body>


<div id="notEnabledId" style="display: none;">
  <p>ENABLED</p>
</div>

<div id="enabledId" style="display: none;">
  <p>NOT ENABLED</p>
</div>


<button class="open-preferences">Toggle</button>

</body>

JavaScript

var enabled = false;

function show(e) {
	 	enabled = e;
    console.log('' + typeof(e) + ' - ' + e);
    
    document.getElementById('enabledId').style.display = 'none';
    document.getElementById('notEnabledId').style.display = 'none';
    
    if (e) {
        document.getElementById('enabledId').style.display = 'block';
    } else {
        document.getElementById('notEnabledId').style.display = 'block';
    }
}

document.querySelector("button.open-preferences").addEventListener("click", () => show(!enabled));