JSFiddle - React, Tailwind, and code Playground

by Nick Craver

HTML

<div>enter code here</div>
<input  type="checkbox" id="office1" name="test"  class="link1" />Office 1<BR>
<input  type="checkbox" name="office2" checked='true' class="link2"/>Office 2<BR>
<input  type="checkbox" name="office3" checked='true' class="link3" />Office 3<BR>
<input  type="checkbox" name="developer" checked='true' class="link4" />Developer<BR>
<input  type="checkbox" name="receptionist" checked='true' class="link5" />Receptionist<BR>
<input  type="checkbox" name="manager" checked='true' class="link6" />Manager<BR>
<table border='1'>
    <tr>
        <td class="toggle-item-link1"><B>Office 1</B><HR>
            <div class="toggle-item-link6"><BR>Manager</div>
            <div class="toggle-item-link6"><BR>Manager</div>
            <div class="toggle-item-link6"><BR>Manager</div>
        </td>
    </tr>
    <tr>
        <td class="toggle-item-link2"><B>Office 2</B><HR>
            <div class="toggle-item-link4"><BR>Developer</div>
            <div class="toggle-item-link4"><BR>Developer</div>
            <div class="toggle-item-link6"><BR>Developer</div>
            <div class="toggle-item-link5"><BR>Receptionist</div>
        </td>
    </tr>
    <tr>
        <td class="toggle-item-link3"><B>Office 3</B><HR>
            <div class="toggle-item-link4"><BR>Developer</div>
            <div class="toggle-item-link4"><BR>Developer</div>
            <div class="toggle-item-link5"><BR>Receptionist</div>
        </td>
    </tr>
</table>

JavaScript

$('[class^=link]').click(function()  {
    var x =  $(this).attr("className");
    if (this.checked) {
        $('.toggle-item-'  + x).show(1000);
    } else {
        $('.toggle-item-'  + x).hide(1000).filter(':hidden').hide();
    }
});