JSFiddle - React, Tailwind, and code Playground

by ahomu

HTML

<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>

CSS

.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

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