<section class="test">
  <div class="test__inner wrap flex-column">
    <div class="test__select">
      <ul class="flex-row">
        <li class="active">タイトル①</li>
        <li>タイトル②</li>
        <li>タイトル③</li>
      </ul>
      <div class="test__txt">
        <p>タイトル①テキスト</p>
      </div>
      <div class="test__txt d-none">
        <p>タイトル②テキスト</p>
      </div>
      <div class="test__txt d-none">
        <p>タイトル③テキスト</p>
      </div>
    </div>
  </div>
</section>

.d-none {
  display: none;
}

.flex-row {
  display: flex;
  align-items: center;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.test ul {
  color: #192653;
  line-height: 1.2;
  text-align: center;
  width: 100%;
  justify-content: space-between;
}

@media screen and (min-width: 1024px) {
  .test ul {
    font-size: 30px;
  }
}

.test li {
  background-color: #FDE948;
  border-radius: 20px 20px 0 0;
  display: flex;
  width: 30%;
  height: 50px;
  align-items: center;
  justify-content: center;
}

@media screen and (min-width: 1024px) {
  .test li {
    height: 90px;
  }
}

.test li.active {
  color: #FFFFFF;
  background-color: #192653;
}

.test__select {
  margin-top: 27px;
}

@media screen and (min-width: 1024px) {
  .test__select {
    margin-top: 40px;
  }
}

.test__txt {
  padding: 20px;
  border: #192653 solid 1px;
  border-radius: 0 0 20px 20px;
  height: 458px;
}

@media screen and (min-width: 1024px) {
  .test__txt {
    border: #192653 solid 3px;
    font-size: 20px;
  }
}

実装のポイントは.d-none クラスの使用です。タイトル①を除く他のボックスにこのクラスを適用することで、それらを非表示にすることができます。そして、Javascriptを使用して、クリックした際に.activeクラスを付与しこれらを表示させるようにします。デザインを実装する際は、全体を通して記述するのではなく、ボタンとテキストの部分を別々にコード化することで、より簡単に記述することが可能です。

class Onclick {
  constructor() {
    this._click();
  }

  _click() {
    // すべてのタブとコンテンツを取得し、変数に格納
    var testTabs = document.querySelectorAll(".test__select ul.flex-row li");
    var testContents = document.querySelectorAll(".test__txt");


    testTabs.forEach(function (tab, index) {
      tab.addEventListener("click", function () {
        // すべてのタブから "active" クラスを削除
        testTabs.forEach(function (tab) {
          tab.classList.remove("active");
        });
        // クリックされたタブに "active" クラスを追加
        this.classList.add("active");
        // すべてのコンテンツを非表示にする
        testContents.forEach(function (content) {
          content.classList.add("d-none");
        });
        // クリックされたタブに対応するコンテンツを表示する
        testContents[index].classList.remove("d-none");
      });
    });
  }
}
new Onclick();

上記で説明した内容をJavascriptで記述すると、このようになります。`.querySelectorAll`を使用してすべてのタブとコンテンツを取得し、`forEach`メソッドを利用して実装していることから、可読性が良く効率的なコードといえます。おすすめの方法としてはChatGTPを活用してコードを生成することです。

function my_custom_shortcode()
{
  ob_start();

  $args = array(
    'post_type' => 'test',
    'order' => 'ASC'
  );
  $my_query = new WP_Query($args);

  $post_counter = 0; // カウンター変数を初期化

  while ($my_query->have_posts()) : $my_query->the_post();
    $post_counter++; // 各投稿でカウンターをインクリメント

    // 最初の投稿以外に 'd-none' クラスを追加
    $class = $post_counter > 1 ? 'test__txt d-none' : 'test__txt';

    echo '<div class="' . $class . '">';
    the_content();
    echo '</div>';
  endwhile;

  wp_reset_postdata();

  return ob_get_clean();
}
add_shortcode('my_test_shortcode', 'my_custom_shortcode');

これは三項演算子（条件演算子）を使用して書かれています。三項演算子は一般的に 条件 ? 真の場合の値 : 偽の場合の値 の形で記述されます。このコードでは、$post_counter >1 が条件であり、この条件が真（true）ならば ‘test__txt d-none’ を、偽（false）ならば ‘test__txt’ を $class 変数に代入します。

$post_counterという変数の値が1より大きいかどうかをチェックしています。もし1より大きければ、$class変数に’test__txt d-none’という文字列を代入します。そうでなければ、’test__txt’という文字列を代入します。