CSS だけでアコーディオンを実装しました (Lightning 無料版)

手順① グループブロックに カスタム HTML とグループを入れる

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

手順② カスタム HTML ブロック

カスタム HTML ブロックに以下のように入力します。

<input type="checkbox" id="accordion-check">
<label for="accordion-check" class="css-accordion-title">
クリックして、CSS だけでアコーディオンを作る方法を見る
<span class="fa-icon"></span>
</label>

手順③ CSS

以下の CSS を追加します。

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

.css-accordion-title {
display: block;
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) calc(var(--vk-size-text)*0.5) 0 0;
background-color: rgba(0,0,0,.05);
margin-bottom: 0;
margin-block-start: 0 !important;
}

.css-accordion input[type=checkbox] {
display: none;
}

.css-accordion input ~ .css-accordion-content {
max-height: 0;
padding-right: calc(var(--vk-size-text)*1);
padding-left: calc(var(--vk-size-text)*1);
overflow: hidden;
transition: all 0.3s ease-in;
margin-block-start: 0 !important;
}

.css-accordion input:checked ~ .css-accordion-content {
max-height: 9999px;
padding-top: calc(var(--vk-size-text)*2);
padding-bottom: calc(var(--vk-size-text)*2);
}

.css-accordion span.fa-icon::before {
display: block;
font-family: "Font Awesome 6 Free";
font-weight: bold;
position: absolute;
top: calc(var(--vk-size-text)*1);
right: 10px;
content: "\f055";
font-size: 1.5em;
color: #666666;
}

.css-accordion input:checked + label span.fa-icon::before {
content: "\f056";
}