アコーディオンを実装しました (VK Blocks 無料版)

手順① グループブロックに段落とグループを入れる

ブロックを組みあわせて、以下のように作ります。赤字で示したものはブロックに割り当てる 追加 CSS クラス です。

手順② CSS

以下の CSS を追加します。

.accordion {
  border: 1px solid var(--vk-color-border);
  border-radius: calc(var(--vk-size-text)*0.5);
  margin-bottom: 2.0em;
}

.accordion-title {
  pointer-events: all;
  cursor: pointer;
  position: relative;
  padding-top: calc(var(--vk-size-text)*1);
  padding-right: calc(var(--vk-size-text)*2);
  padding-bottom: calc(var(--vk-size-text)*1);
  padding-left: calc(var(--vk-size-text)*1);
  border-radius: calc(var(--vk-size-text)*0.5);
  background-color: rgba(0,0,0,.05);
  margin-bottom: 0;
}

.accordion-title.accordion-open {
  border-radius: calc(var(--vk-size-text)*0.5) calc(var(--vk-size-text)*0.5) 0 0;
  border-bottom: 1px dotted var(--vk-color-border);
}

.accordion-title:before {
  display: block;
  font-family: "Font Awesome 5 Free";
  font-weight: bold;
  position: absolute;
  right: 10px;
  content: "\f055" !important;
  font-size: 1.5em;
}

.accordion-title.accordion-open:before {
  content: "\f056" !important;
}

.accordion-content {
  display:none;
  padding-top: calc(var(--vk-size-text)*2);
  padding-right: calc(var(--vk-size-text)*1);
  padding-bottom: calc(var(--vk-size-text)*2);
  padding-left: calc(var(--vk-size-text)*1);
}

手順③ JavaScript

以下の jQuery プログラムを追加します。

$('.accordion-title').click(function(){
  $(this).next().slideToggle();
  $(this).toggleClass("accordion-open");
});