<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>
.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ないからResultタブへどうぞ