JSFiddle - React, Tailwind, and code Playground

by ahomu

HTML

<input id="pane1" type="radio" name="accordion" value="1" />
<label id="label1" for="pane1" onclick="">Pane1</label>
<div id="body1" class="body">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

<input id="pane2" type="radio" name="accordion" value="2" />
<label id="label2" for="pane2" onclick="">Pane2</label>
<div id="body2" class="body">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

<input id="pane3" type="radio" name="accordion" value="3" />
<label id="label3" for="pane3" onclick="">Pane3</label>
<div id="body3" class="body">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

CSS

.body {
    height: 0;
    overflow: hidden;
    -webkit-transition: height 0.3s ease-in-out;
    transition: height 0.3s ease-in-out;
}
[type="radio"] {
    display :none;
}
#pane1:checked ~ #body1,
#pane2:checked ~ #body2,
#pane3:checked ~ #body3 {
    height: 50px;
}

JavaScript

// JavaScriptないからResultタブへどうぞ