JSFiddle - React, Tailwind, and code Playground

by JamesKyle

HTML

<div data-collapse>
    <input type="checkbox" id="foo" data-controller checked>
    <div data-container>
        <ul>
            <li>Item 1</li>
            <li data-target>Item 2</li>
            <li data-reverse>Item 3</li>
            <li data-target>Item 4</li>
        </ul>
        <label for="foo" data-default>Open</label>
        <label for="foo" data-alt>Close</label>
    </div>
</div>

CSS

[data-collapse] input[type][data-controller] { display: none }

[data-collapse] input[type][data-controller]:checked + [data-container] { background: red }

[data-collapse] input[type][data-controller]:checked + [data-container] [data-default] { display: none }

[data-collapse] input[type][data-controller]:not(:checked) + [data-container] [data-alt] { display: none }

[data-collapse] input[type][data-controller]:not(:checked) + [data-container] [data-target] {
    display: none;
}

[data-collapse] input[type][data-controller]:checked + [data-container] [data-reverse] {
    display: none;
}