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

パーツ番号 01-03-09 ・ JavaScript使用

アコーディオン式モバイルフッター

各リンク列の見出しをクリックで開閉するスマホ想定のフッター。省スペースにリンクをまとめられます。WordPressのモバイル最適化フッターに。

mobileclickjs

プレビュー

ソースコード

HTML

<footer class="d01-03-09-ft">
          <div class="d01-03-09-acc">
            <button class="d01-03-09-head" type="button" aria-expanded="false">サービス<span class="d01-03-09-ico"></span></button>
            <div class="d01-03-09-body"><a href="#">Web制作</a><a href="#">LP制作</a><a href="#">運用保守</a></div>
          </div>
          <div class="d01-03-09-acc">
            <button class="d01-03-09-head" type="button" aria-expanded="false">会社情報<span class="d01-03-09-ico"></span></button>
            <div class="d01-03-09-body"><a href="#">私たちについて</a><a href="#">実績</a><a href="#">採用情報</a></div>
          </div>
          <div class="d01-03-09-acc">
            <button class="d01-03-09-head" type="button" aria-expanded="false">サポート<span class="d01-03-09-ico"></span></button>
            <div class="d01-03-09-body"><a href="#">お問い合わせ</a><a href="#">FAQ</a><a href="#">プライバシー</a></div>
          </div>
          <div class="d01-03-09-copy">&copy; 2026 Mobile First Co.</div>
        </footer>

CSS

.d01-03-09-ft{background:#111827;color:#cbd5e1;padding:14px 18px;font-size:11px;box-sizing:border-box;height:100%;display:flex;flex-direction:column;justify-content:center}
        .d01-03-09-acc{border-bottom:1px solid rgba(255,255,255,.08)}
        .d01-03-09-head{width:100%;background:none;border:none;color:#fff;font-size:11.5px;font-weight:600;padding:10px 0;display:flex;justify-content:space-between;align-items:center;cursor:pointer}
        .d01-03-09-ico{position:relative;width:11px;height:11px}
        .d01-03-09-ico::before,.d01-03-09-ico::after{content:"";position:absolute;background:#94a3b8;transition:transform .3s}
        .d01-03-09-ico::before{top:5px;left:0;width:11px;height:1.5px}
        .d01-03-09-ico::after{top:0;left:5px;width:1.5px;height:11px}
        .d01-03-09-head[aria-expanded="true"] .d01-03-09-ico::after{transform:rotate(90deg)}
        .d01-03-09-body{max-height:0;overflow:hidden;transition:max-height .35s ease}
        .d01-03-09-body a{display:block;color:#94a3b8;text-decoration:none;padding:5px 0 5px 8px;font-size:10.5px}
        .d01-03-09-body a:hover{color:#fff}
        .d01-03-09-copy{margin-top:12px;text-align:center;color:#64748b;font-size:10px}

JavaScript

(function(){
        var root=document.getElementById('item-01-03-09');
        var heads=root.querySelectorAll('.d01-03-09-head');
        heads.forEach(function(h){
          h.addEventListener('click',function(){
            var body=h.nextElementSibling;
            var open=h.getAttribute('aria-expanded')==='true';
            h.setAttribute('aria-expanded',String(!open));
            body.style.maxHeight=open?'0':body.scrollHeight+'px';
          });
        });
      })();

クラス名 .d01-03-09 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。