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

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

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

/*------------------------------------------------------------------*/
/*--- 投稿日、記事タイトル、パーマリンクを表示するショートコード ---*/
/*------------------------------------------------------------------*/
function print_post($atts){
	$retHTML='';
	
	// デフォルトの値を設定
	extract(shortcode_atts(array(
		"num" => '20',
		"odr" => 'ASC'
	), $atts));

	global $post;
	
	$myposts = get_posts('numberposts='.$num.'&order='.$odr);
	
	foreach($myposts as $post):
    setup_postdata($post);
	    $retHTML.=get_the_date('Y年n月j日')." : ";
		$retHTML.="<a href=\"".get_permalink()."\">".'
		';
		$retHTML.=''.the_title("","",false).'
		';
		$retHTML.="</a><br />";
	endforeach;
	wp_reset_postdata();
	return $retHTML;
}

add_shortcode('list','print_post');
/*------------------------------------------------------------------*/

<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>

/*-----------------------------------------------------------*/
/*            ボタンクリックで表示内容を切り替える             */
/*-----------------------------------------------------------*/
.et_pb_module {
  display: inline-block;
}

.secList {
  display: inline-block;
  padding: 0.3em 1em;
  text-decoration: none;
  background: #000080;
  transition: .4s;
  margin-right: 10px;
}
  
.secList:hover {
  background: #67c5ff;
  color: white;
}

.et_pb_text_inner1 {
 
}

.et_pb_text_inner2 {
  
}
/*-----------------------------------------------------------*/

<!-- ボタンクリックで表示内容を切り替える その-2：ボタンで切り替え -->
<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>

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

引用元：[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 を追記する。