JSFiddle - React, Tailwind, and code Playground

by kachibito

HTML

<ul id="nav">
<li class="opentoBox01"><a href="javascript:;">ボックス01を明らかに</a></li>
<li class="opentoBox02"><a href="javascript:;">ボックス02を明らかに</a></li>
</ul>

<div id="boxWrap">
<div id="box01">
<p>サンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p>
<p>サンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p>
<p>サンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p>
</div>

<div id="box02">
<p>サンプル02サンプル02サンプル02サンプル02サンプル02サンプル02</p>
<p>サンプル02サンプル02サンプル02サンプル02サンプル02サンプル02</p>
<p>サンプル02サンプル02サンプル02サンプル02サンプル02サンプル02</p>
</div>
</div>

CSS

body, div, ul, li, p, a {
    margin: 0;
    padding: 0;
}

body {
    color: #333;
    background: #d8ffec;
    font-size: 13px;
}
a:link, a:visited {
    color: #3e8c84;
    text-decoration: underline;
}
a:hover, a:active {
    color: #47a197;
    text-decoration: none;
}

#nav {
    margin: 20px;
}
#boxWrap {
    border-top: solid 1px #a7c2b1;
    border-bottom: solid 1px white;
}
#box01, #box02 {
    display: none;
    padding: 10px;
}
#box01 {
    background: #fffdbd;
}
#box02 {
    background: #e2ffd8;
}

JavaScript

/* Box01の開閉 */
$('.opentoBox01').click(function() {
    $('#box01').slideToggle();
    $('#box02').slideUp();
});
/* Box02の開閉 */
$('.opentoBox02').click(function() {
    $('#box02').slideToggle();
    $('#box01').slideUp();
});