「詳細」ブロックを「アコーディオン（トグル）」ブロック風にし1つだけ開き他を閉じる方法

以下の手順で設定します。

1. 「詳細」ブロックを選択し、高度な設定→name属性に例えばa1と入力します。
2. 「詳細」ブロック内の各ブロックをグループ化します。
3. グループ全体に対して、高度な設定→追加CSSクラスにdetails-contentと入力します。
4. 複数の「詳細」ブロックをグループ化し、高度な設定→追加CSSクラスにmy-accordionと入力します。

以下のコードをstyle.cssに追加します。

/* Safari */
summary::-webkit-details-marker {
  display: none;
}

.my-accordion {
  details {
    border: 1px solid #ccc;
    margin-bottom: 30px;

    &[open] {
      summary::after {
        content: '\f106';
      }
    }
  }

  summary {
    background-color: #ccc;
    font-weight: bold;
    list-style: none;
    padding: 15px calc(15px + 1em) 15px 15px;
    position: relative;

    &::after {
      align-items: center;
      content: '\f107';
      display: flex;
      font-family: 'Font Awesome 5 Free';
      font-weight: 900;
      height: 100%;
      position: absolute;
      right: 1em;
      top: 0;
    }
  }

  .details-content {
    padding: 15px;
  }
}

以下の手順で設定します。

1. 「詳細」ブロックを選択し、高度な設定→name属性に例えばt1と入力します。
2. 「詳細」ブロック内の各ブロックをグループ化します。
3. グループ全体に対して、高度な設定→追加CSSクラスにdetails-contentと入力します。
4. 複数の「詳細」ブロックをグループ化し、高度な設定→追加CSSクラスにmy-timelineと入力します。

以下のコードをstyle.cssに追加します。

/* Safari */
summary::-webkit-details-marker {
  display: none;
}

.my-timeline {
  details {
    padding-bottom: 15px;
    position: relative;

    &:last-of-type {
      padding: 0;
    }

    &::before {
      background-color: #eee;
      content: "";
      display: block;
      height: 100%;
      left: 7px;
      position: absolute;
      top: 0;
      width: 3px;
      z-index: -1;
    }

    &::after {
      background-color: #ff0000;
      border-radius: 100%;
      content: "";
      display: block;
      height: 16px;
      left: 0;
      position: absolute;
      top: 7px;
      width: 16px;
    }
  }

  summary {
    font-weight: bold;
    list-style: none;
    padding-left: 25px;
  }

  .details-content {
    padding: 0 0 0 25px;
  }
}