← 動的パーツギャラリーへ戻る

パーツ番号 08-07-10 ・ JavaScript使用

ドラッグ開閉アコーディオンハンドル

下部のグリップを下にドラッグすると回答欄が引き出され、離すと開閉状態にスナップします。WordPressのFAQセクションに使えます。

dragjs

プレビュー

ソースコード

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 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。