パーツ番号 08-07-10 ・ JavaScript使用
ドラッグ開閉アコーディオンハンドル
下部のグリップを下にドラッグすると回答欄が引き出され、離すと開閉状態にスナップします。WordPressのFAQセクションに使えます。
プレビュー
ソースコード
HTML
<div class="d08-07-10-acc" id="d08-07-10-acc">
<div class="d08-07-10-head">よくある質問<span class="d08-07-10-arrow" id="d08-07-10-arrow">⌄</span></div>
<div class="d08-07-10-body" id="d08-07-10-body"><div class="d08-07-10-inner"><p>送料は全国一律500円、通常2〜3営業日でお届けします。返品は到着後7日以内なら可能です。</p></div></div>
<div class="d08-07-10-grip" id="d08-07-10-grip"><span></span></div>
</div>CSS
.d08-07-10-acc{width:100%;max-width:260px;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.08);border:1px solid #eef0f3}
.d08-07-10-head{padding:12px 16px;font-size:13px;font-weight:700;color:#2a2d3a;display:flex;justify-content:space-between;align-items:center;cursor:pointer}
.d08-07-10-arrow{color:#9aa0b0;transition:transform .25s}
.d08-07-10-acc.is-open .d08-07-10-arrow{transform:rotate(180deg)}
.d08-07-10-body{height:0;overflow:hidden}
.d08-07-10-inner{padding:0 16px 14px}
.d08-07-10-inner p{font-size:12px;color:#6b7280;line-height:1.7;margin:0}
.d08-07-10-grip{display:flex;align-items:center;justify-content:center;padding:6px 0;cursor:ns-resize;touch-action:none}
.d08-07-10-grip span{width:34px;height:4px;border-radius:99px;background:#dcdfe6;display:block}
.d08-07-10-grip:active span,.d08-07-10-acc.is-open .d08-07-10-grip span{background:#6a5cff}JavaScript
(function(){
var root=document.getElementById('item-08-07-10');if(!root)return;
var acc=root.querySelector('#d08-07-10-acc'),body=root.querySelector('#d08-07-10-body'),grip=root.querySelector('#d08-07-10-grip'),head=root.querySelector('.d08-07-10-head');
if(!acc||!body||!grip)return;
var full=0,dragging=false,startY=0,startH=0;
function fullHeight(){return body.querySelector('.d08-07-10-inner').offsetHeight;}
grip.addEventListener('pointerdown',function(e){
dragging=true;startY=e.clientY;startH=body.offsetHeight;full=fullHeight();
body.style.transition='none';
try{grip.setPointerCapture(e.pointerId);}catch(err){}
});
grip.addEventListener('pointermove',function(e){
if(!dragging)return;
var dy=e.clientY-startY;
var h=Math.min(full,Math.max(0,startH+dy));
body.style.height=h+'px';
});
function end(){
if(!dragging)return;
dragging=false;
body.style.transition='height .25s ease';
var h=body.offsetHeight;
var open=h>full/2;
body.style.height=(open?full:0)+'px';
acc.classList.toggle('is-open',open);
}
grip.addEventListener('pointerup',end);
grip.addEventListener('pointercancel',end);
if(head)head.addEventListener('click',function(){
var open=!acc.classList.contains('is-open');
full=fullHeight();
body.style.transition='height .25s ease';
body.style.height=(open?full:0)+'px';
acc.classList.toggle('is-open',open);
});
})();クラス名 .d08-07-10 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。