<head>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<dl class="qanda-box">
<dt class="q-tt" data-target="qanda-01">テキストテキストテキストテキストテキストテキストテキスト</dt>
<dd id="qanda-01" class="a-tt">テキストテキストテキストテキスト</dd>
</dl>
<dl class="qanda-box">
<dt class="q-tt" data-target="qanda-02">テキストテキストテキストテキストテキストテキストテキスト</dt>
<dd id="qanda-02" class="a-tt">テキストテキストテキストテキストテキストテキストテキストテキスト</dd>
</dl>
<dl class="qanda-box">
<dt class="q-tt" data-target="qanda-03">テキストテキストテキストテキストテキストテキスト</dt>
<dd id="qanda-03" class="a-tt">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd>
</dl>.qanda-box{
margin-bottom: 20px;
width:300px;
}
.qanda-box:last-child{
margin-bottom:0px;
}
.q-tt{
padding:10px 30px 10px 10px;
background: rgba(136, 193, 25, 0.2);
position: relative;
cursor : pointer;
}
.q-tt:after{
content:"▼";
position: absolute;
right: 10px;
color:#666;
top:50%;
transform: translateY(-50%);
}
.q-tt.open:after {
transform:translateY(-50%) rotate(180deg) ;
}
.a-tt{
display: none;
padding:10px 5px 0;
margin:0;
}$(function()
{
$( '.q-tt' ).click( function()
{
// [data-target]の属性値を代入する
var target = $( this ).data( 'target' ) ;
// [target]と同じ名前のIDを持つ要素に[slideToggle()]を実行する
$( '#' + target ).slideToggle() ;
//クリックした時にopenというクラスを付与、矢印動かすため
$(this).toggleClass('open');
// 終了
return false ;
} ) ;
}) ;
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.