<div id="pane1" class="pane"> <a href="#pane1">Pane1</a> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> </div> <div id="pane2" class="pane"> <a href="#pane2">Pane2</a> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> </div> <div id="pane3" class="pane"> <a href="#pane3">Pane3</a> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> </div>
.content { height: 0; overflow: hidden; -webkit-transition: height 0.3s ease-in-out; transition: height 0.3s ease-in-out; } .pane:target .content { height: 50px; }
// JavaScriptないからResultタブへどうぞ