JSFiddle - React, Tailwind, and code Playground
HTML
<form>
<label class="switch">
<input type="checkbox" id = 'cb1'/>
<div class="slider round"></div>
</label></form>
<div id = 'cat1' style = 'display: none;'>Содержимое категории 1</div>
<div id = 'cat2' style = 'display: none;'>Содержимое категории 2</div>
JavaScript
function showOrHide(e) {
var cb = e.target;
var cat1 = document.getElementById('cat1');
var cat2 = document.getElementById('cat2');
if (cb.checked) {
cat2.style.display = "none";
cat1.style.display = "block";
}else {
cat1.style.display = "none";
cat2.style.display = "block";
}
}
document.getElementById('cb1').addEventListener('change', showOrHide);