HTMLサイトマップに折りたたみ機能を付けたデモ

私が使ってるのは（onclick=””）HTML / インラインのアコーディオンで、これに関してはテキストエディタにショートコード[sitemap]を記述し表示していますが、
『（input要素）HTML / CSSのアコーディオン』と『Cocoonの目次の折りたたみタグ・CSSを使ったアコーディオン』は、このページ上で表示されてるのはphpでショートコードを作り表示したものではなくHTMLタグとCSSで表示しており、こんなデザインでこういう動作をするよ。というデモだとお考えください。

（input要素も目次の折りたたみを利用したのも、[sitemap]コードを作ってテキストエディタにショートコードを記述して実際に表示され動くかはテスト検証済みです。検証後、使わないコードをそのままにしておいても容量圧迫するからコードを消しましたので。）

スポンサーリンク

（onclick=””）HTML / インラインのアコーディオン

記事一覧

▼ クリックまたはタップして記事一覧を表示
HTMLタグ

<!-- 折り畳み展開 -->
<span onclick="obj=document.getElementById('open1').style; obj.display=
(obj.display=='none')?'block':'none';">
<a style="cursor:pointer;">▼ クリックまたはタップして記事一覧を表示</a>
</span>
<ul>
<!-- 折り畳まれる部分 -->
<span id="open1" style="display: none; clear: both;">
***ここに折りたたまれる部分が入ります***
</span>
</ul>

ショートコードに (onclick=””)アコーディオンを追加したコード

<h2><?php _e( '記事一覧', THEME_NAME ) ?></h2>
<!-- 折り畳み展開 -->
<span onclick="obj=document.getElementById('open1').style; obj.display=
(obj.display=='none')?'block':'none';">
<a style="cursor:pointer;">▼ クリックまたはタップして記事一覧を表示</a>
</span>
<ul>
<!-- 折り畳まれる部分 -->
<span id="open1" style="display: none; clear: both;">
<?php wp_get_archives( 'type=alpha' ); ?>
</span>
</ul>

（input要素）HTML / CSSのアコーディオン

記事一覧


HTMLタグ

<!-- 折り畳み展開 -->
<div class="openbox">
<label for="pushlabel">▼ クリックまたはタップして記事一覧を表示</label>
<input id="pushlabel" class="inputcss" type="checkbox" />
<span class="boxshow">
<!--折り畳まれる部分-->
<ul>
<li>**ここは折りたたまれる部分です**</li>
<li><a href="URL">折りたたまれる部分にリンク付けたい場合</a></li>
</ul>
</span>
</div>

CSS

.openbox input {
display: none; /* チェックボックスを隠す */
}
.openbox .boxshow {
height: 0;
opacity: 0; /* 折り畳んだ時に中を透明にする */
display: none;/* 閉じた時に中身の要素をなくす */
}
.inputcss:checked + .boxshow {
height: auto;
opacity: 1; /*クリックやタップで中を表示させる*/
display: block;/* 折り畳みになるように */
}
.openbox label {
border: 1px solid #ccc;
padding: 5px 10px;
}

ショートコードに（input要素）アコーディオンを追加したコード

<h2><?php _e( ‘記事一覧’, THEME_NAME ) ?></h2>
<!– 折り畳み展開 –>
<div class=”openbox”>
<label for=”pushlabel”>▼ クリックまたはタップして記事一覧を表示</label>
<input id=”pushlabel” class=”inputcss” type=”checkbox” />
<span class=”boxshow”><!–折り畳まれる部分–>
<ul>
<?php wp_get_archives( ‘type=alpha’ ); ?>
</ul>
</span>
</div>

Cocoonの目次の折りたたみタグ・CSSを使ったアコーディオン

HTMLタグ

<div id="toc" class="toc tnt-none toc-center border-element">
<input type="checkbox" class="toc-checkbox" id="toc-checkbox-2" checked="">
<label class="toc-title" for="toc-checkbox-2">クリックまたはタップして記事一覧を表示</label>
<div class="toc-content">
<ul class="toc-list open"><!--折り畳まれる部分-->
<li>ここに一覧の記事ページ</li>
</ul>
</div>
</div>

※inputのid=””　と　labelのfor=””　は目次とクリックする時の認識IDが被らないようにtoc-checkbox-2など目次とは異なる名前にする
※ページ表示直後から展開している状態でクリックすると閉じるなら<input>にchecked=””を付ける
ページ表示直後は閉じた状態でクリックしたら開くにしたいならばchecked=””を記述しない

CSS

.toc-checkbox:checked + .toc-title::after {
content: '[閉じる]';
}
.toc-title::after {
content: '[開く]';
}
.toc-title {
text-align: left; /* テキストの寄せ方指定 */
padding: 2px;
}
.toc {
border: 1px solid #ccc; /* ボックスの線の調整 */
}

同ページに「目次」も表示させ装飾が被らないようにしたい場合はphpに書いた方のHTMLタグのtoc-checkbox、toc-title、toc-titleのクラス名を変える

ショートコードにCocoonの目次の折りたたみアコーディオンタグを追加したコード

<h2><?php _e( ‘記事一覧’, THEME_NAME ) ?></h2>
<!– 折り畳み展開 –>
<div id=”toc” class=”toc tnt-none toc-center border-element”>
<input type=”checkbox” class=”toc-checkbox” id=”toc-checkbox-2″ checked=””>
<label class=”toc-title” for=”toc-checkbox-2″>クリックまたはタップして記事一覧の展開</label>
<div class=”toc-content”>
<!–折り畳まれる部分–>
<ul class=”toc-list open”>
<?php wp_get_archives( ‘type=alpha’ ); ?>
</ul>
</div>
</div>
タイトルとURLをコピーしました