【WordPress】サイドバーのメニューをアコーディオンに。プラグイン無しで超簡単

<details>
       <summary>IT</summary>
       <div class="details-content">
            <p><a href="/it-nandemo-ya/">ITなんでも屋</a></p>
            <p><a href="/">【googleスプレッドシート】メニューを追加する方法</a></p>
            <p><a href="/">【gmail】Googleスプレッドシートから自動送信させる【自動送信】</a></p>
        </div>
   </details>
    
    <details>
        <summary>武蔵小杉情報</summary>
        <div class="details-content">
            <p><a href="/">木月大町公園</a></p>
            <p><a href="https://takayuki-soft.com/kosugi/kosugicurry2021/">コスギカレーフェス</a></p>
        </div>
    </details>

<style>
summary {
    position: relative;
    display: block; /* 矢印を消す */
    padding: 10px 10px 10px 30px; /* アイコンの余白を開ける */
    cursor: pointer; /* カーソルをポインターに */
    font-weight: bold;
    background-color: #e2f0f7;
    transition: 0.2s;
    margin-bottom: 0.5em;
  }
  summary:hover {
    background-color: #ccebfb;
  }
  summary::-webkit-details-marker {
    display: none;　/* 矢印を消す */
  }
  
  /* 疑似要素でアイコンを表示 */
  summary:before,
  summary:after {
    content: "";
    margin: auto 0 auto 10px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
  }
  summary:before {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    background-color: #1da1ff;
  }
  summary:after {
    left: 6px;
    width: 5px;
    height: 5px;
    border: 4px solid transparent;
    border-left: 5px solid #fff;
    box-sizing: border-box;
    transition: .1s;
  }
  
  /* オープン時のスタイル */
  details[open] summary {
    background-color: #ccebfb;
  }
  details[open] summary:after {
    transform: rotate(90deg); /* アイコンを回転 */
    left: 4px; /* 位置を調整 */
    top: 5px; /* 位置を調整 */
  }
  
  /* アニメーション */
  details[open] .details-content {
    animation: fadeIn 0.5s ease;
  }
  @keyframes fadeIn {
    0% {
      opacity: 0;
      transform: translateY(-10px);
    }
    100% {
      opacity: 1;
      transform: none;
    }
  }
/* コンテンツのデザイン */
.details-content p{
    line-height: 1.2;
    margin-block-end: 0.8em;
    font-size: 0.9em;
    display: block;
    margin-left: 1em;
}
</style>