JSFiddle - React, Tailwind, and code Playground

by JamesKyle

HTML

<div data-role="collapse" data-state="shut">
    <ul data-subrole="container">
        <li data-subrole="ignore">Something</li>
        <li>Something</li>
        <li data-subrole="ignore">Something</li>
        <li data-subrole="expand">Switch</li>
    </ul>
    <p>Test</p>
</div>

CSS

[data-role="collapse"]
[data-role="collapse"][data-state="shut"] [data-subrole="container"] > *,
[data-role="collapse"][data-state="shut"][data-subrole="container"] > *,
[data-role="collapse"][data-state="open"] [data-subrole="reverse"] {
    display: none;
}

[data-role="collapse"][data-state="open"] [data-subrole="container"] > *,
[data-role="collapse"][data-state="open"][data-subrole="container"] > *,
[data-role="collapse"][data-state="shut"] [data-subrole="reverse"],
[data-role="collapse"][data-state] [data-subrole="ignore"],
[data-role="collapse"][data-state] [data-subrole="expand"] {
    display: block;
}

JavaScript

var collapse = $('[data-role="collapse"]')
    .find('[data-subrole="expand"]');

  
collapse.click(function(e) {
  
  e.preventDefault();

  var $this = $(this).parent('[data-role="collapse"]'),
        alt = $this.find('[data-alt]');
  
  alt.each(function() {
    var $this   = $(this),
        text    = $this.text(),
        newText = $this.attr('data-alt');

    $this.attr('data-alt', text).text(newText);
  });
  
  if ($this.attr('data-state') === "open") {
    $this.attr('data-state', 'shut');
  } else { 
    $this.attr('data-state', 'open');
  }
  
});