JSFiddle - React, Tailwind, and code Playground

by monkrocker

HTML

<div class="section header">
        <span id="headerMessage">all sections are closed</span>
    </div>
    <div class="section closed clearfix">
        section <span class="sectionName">a</span>
        <label for="sectionA" id="labelA"></label><input type=checkbox id="sectionA"/>
        <div class="sectionContent">section <span class="sectionName">a</span> content</div>
    </div>
    <div class="section closed clearfix">
        section <span class="sectionName">b</span>
        <label for="sectionB"></label><input type=checkbox id="sectionB"/>
        <div class="sectionContent">section <span class="sectionName">b</span> content</div>
    </div>
    <div class="section closed">
        section <span class="sectionName">c</span>
    </div>
    <div class="section closed">
        section <span class="sectionName">d</span>
    </div>

CSS

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

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

#sectionA:checked ~ label:after {
    content: 'close';
}

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

.header {
    background-color: #ddd;
}

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

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

#sectionA:checked + .sectionContent {
    max-height: 30px;
    display: block;
}

.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
}

.clearfix { 
    display: inline-block; 
}

#siblings {
    color: #333;
}

#siblings, h2 ~ div {
    color: red;
}