JSFiddle - React, Tailwind, and code Playground

by monkrocker

HTML

<div id="container">
    <input id="a" type="checkbox"/>
    <input id="b" type="checkbox"/>
    <input id="c" type="checkbox"/>
    <input id="d" type="checkbox"/>
    <input id="all" type="checkbox"/>
    <div id="sectiona" class="section s1">
      section <span class="sectionName">a</span>
      <label for="a"></label>
      <div class="sectionContent" id="contentA">section <span class="sectionName">a</span> content</div>
    </div>
    <div id="sectionb" class="section s2">
      section <span class="sectionName">b</span>
      <label for="b"></label>
      <div class="sectionContent" id="contentB">section <span class="sectionName">b</span> content</div>
    </div>
    <div id="sectionc" class="section s3">
      section <span class="sectionName">c</span>
      <label for="c"></label>
      <div class="sectionContent" id="contentC">section <span class="sectionName">c</span> content</div>
    </div>
    <div id="sectiond" class="section s4">
      section <span class="sectionName">d</span>
      <label for="d"></label>
      <div class="sectionContent" id="contentD">section <span class="sectionName">d</span> content</div>
    </div>
    <br/>
    <div id="header">
      <span id="closed">all sections are closed</span>
      <span id="open">
        section<span class="plural">s</span>
        <!--tab listing-->
        <span class="t seca">a</span><!--
        --><span class="t commaab">, </span><!--
        --><span class="t andab"> and </span><!--
        --><span class="t secb">b</span><!--
        --><span class="t commabc">, </span><!--
        --><span class="t andbc"> and </span><!--
        --><span class="t secc">c</span><!--
        --><span class="t andcd"> and </span><!--
        --><span class="t secd">d</span><!--
        -->
        <span class="singular">is</span>
        <span class="plural">are</span> open
        <label id="closeall" for="all"></label>
      </span>
    </div>
  </div>

CSS

/* Hide everything to start with */
#closed,
#open,
.plural,
.t {
  display: none;
}

input[type='checkbox'] {
    visibility: hidden;
}

#header {
    background-color: #ddd;
    border: 1px solid black;
    border-radius: 4px;
    line-height: 35px;
    margin: 1% auto;
    padding-left: 5px;
    /*position: absolute;
    top: 0; */
    width: 100%;
}

.section {
  border: 1px solid black;
  border-radius: 4px;
  margin: 1% auto;
  position: relative;
  line-height: 35px;
  padding-left: 5px;
  width: 100%;
}

.sectionName {
    color: #ffa500;
    font-style: italic;
    display: inline;
}

.sectionContent {
    max-height: 0;
    display: none;
    transition: all .4s;
}

label:not(#closeall):after {
    color: blue;
    text-decoration: underline;
    display: inline;
    position: absolute;
    right: 10px;
    content: 'open';
}

#closeall {
    color: blue;
    text-decoration: underline;
    display: inline;
    position: absolute;
    right: 10px;
    content: 'close all';
}

/* toggle open/close text on buttons */
#a:checked ~ #sectiona > label:after,
#b:checked ~ #sectionb > label:after,
#c:checked ~ #sectionc > label:after,
#d:checked ~ #sectiond > label:after {
  content: 'close';
}

/* show/hide section content */
#a:checked ~ #sectiona > .sectionContent,
#b:checked ~ #sectionb > .sectionContent,
#c:checked ~ #sectionc > .sectionContent,
#d:checked ~ #sectiond > .sectionContent {
  max-height: 30px;
  display: block;
}

/* When nothing is checked, show #T0, otherwise, show #T1 */
#a:not(:checked) + #b:not(:checked) + #c:not(:checked) + #d:not(:checked) ~ #header #closed,
:checked ~ #header #open {
   display: inline;
}

/* Check if the message should be plural or singular */
:checked ~ :checked ~ #header .plural {
  display: inline;
}
:checked ~ :checked ~ #header .singular {
  display: none;
}

/* display close all 
:checked ~ #header ~ #closeall:after {
  display: inline;
}
*/
#a:checked ~ #header .seca,
#b:checked ~ #header .secb,
#c:checked ~...