ボタンクリックで表示内容を切り替える

「昇順リスト」ボタンをクリックしたときの「投稿日＜昇順＞記事一覧」。

「降順リスト」ボタンをクリックしたときの「投稿日＜降順＞記事一覧」。

<div> </div>
<div style="border: 1px solid #800000; padding: 5px 10px 3px 10px; background: #c5ff88;"><strong>1. 投稿日順 記事一覧</strong></div>
<div> </div>
<p><!-- List --></p>
<div class="et_pb_module"><button id="fuu" class="secList">昇順リスト</button></div>
<div class="et_pb_module"><button id="euu" class="secList">降順リスト</button></div>
<p><!-- Sections --></p>
<div class="fuu section">
<div class="et_pb_text_inner1">
<h2>投稿日・昇順・記事一覧</h2>
<div style="font-size: 10pt;">[list num="50" odr="asc"]</div>
</div>
</div>
<div class="euu section">
<div class="et_pb_text_inner2">
<h2>投稿日・降順・記事一覧</h2>
<div style="font-size: 10pt;">[list num="50" odr="dsc"]</div>
</div>
</div>
<div> </div>

　ボタンでの切り替えを実装するに当たり、下記記事を参考にさせて頂きました。

引用元：[jQuery] クリックでセクションの表示・非表示を切り替える

<script>
jQuery(function(){
  jQuery('.section').hide();
  
  jQuery('.secList').on('click',function(){
        // クリックした要素の ID と違うクラス名のセクションを非表示
    jQuery('.section').not(jQuery('.'+jQuery(this).attr('id'))).hide();
    // クリックした要素の ID と同じクラスのセクションを表示
    jQuery('.'+jQuery(this).attr('id')).show(1000);
    
    // toggle にすると、同じボタンを 2 回押すと非表示になる
    // jQuery('.'+jQuery(this).attr('id')).toggle();
  });
});
</script>

テーマ「Twenty Seventeen」デフォルトで読み込まれている。

子テーマの編集で「スタイルシート」にCSSを追記する。

子テーマの編集で「Javascript」に jQuery を追記する。