JSFiddle - React, Tailwind, and code Playground

by JamesKyle

HTML

<div data-role="collapse">
    <ul>
        <li>Something</li>
        <li data-subrole="target">Something</li>
        <li>Something</li>
        <li data-subrole="expand" data-open-text="Open" data-shut-text="Shut"></li>
    </ul>
</div>

CSS

[data-role="collapse"][data-state="shut"] [data-subrole="target"],
[data-role="collapse"]:not([data-state]) [data-subrole="expand"] {
  display: none }

[data-role="collapse"][data-state] [data-open-text],
[data-role="collapse"][data-state] [data-shut-text] {
  display: block }

[data-role="collapse"][data-state="open"] [data-open-text]::before {
  content: attr(data-open-text) }

[data-role="collapse"][data-state="shut"] [data-shut-text]::before {
  content: attr(data-shut-text) }

JavaScript

var collapse = $('[data-role="collapse"]')
    // 
    .each(function() {
        var $this = $(this);
        // 
        if ( $this.not('[data-state]') ) {
            $this.attr('data-state', 'shut');
        }
    })
    // Find Expand Button
    .find('[data-subrole="expand"]')
    // 
    .click(function() {
        var $this = $(this).parent('[data-role="collapse"]');
        
        $this.attr('data-state', function() {
            $this.is('[data-state="open"]') ? return 'shut' : return 'open';
        });
    });