表をたたみたい

7110naitoさん、こんにちは。

個人的な意見ですが、アコーディオンブロックを導入できるプラグインも探せばありますので、探してみてはいかがでしょうか。

ご参考になれば。

7110naitoさん、こんにちは。

OneDrive の共有を使用しているようですが、アクセスできないので見ることができません。
全体に共有設定を行うか、他の一般的な画像共有サイト等を利用されるとよろしいかと。

ご参考になれば。

こんにちは、

こんな感じでどうでしょう。

<table>
<tr tabindex="0" class="group-1" style="background:#eee"><td>hello</td><td>world</td></tr>
<tr class="group-1"><td >group1 hello</td><td>world</td></tr>
<tr class="group-1"><td>group1 hello</td><td>world</td></tr>
<tr class="group-2" tabindex="0" style="background:#eee"><td>hello</td><td>world</td></tr>
<tr class="group-2"><td>group2 hello</td><td>world</td></tr>
<tr class="group-2"><td>group2 hello</td><td>world</td></tr>
</table>

tr:not([tabindex]){
display:none;
}
.group-2:focus-within ~ tr.group-2,
.group-1:focus-within ~ tr.group-1{
display:table-row;
}

ブロックエディタでエラーになりますが、HTMLで編集で何とかなるのでしょう。
セルにリンクなどがある場合は、もうちょっとCSSの検討が必要になるでしょう。

• この返信は1年前にnobitaが編集しました。

htmlは、カスタムHTMLブロックに貼り付けてください。

カスタマイザー/追加CSSに以下を張り付けてみてください

テーマによってCSSが効かない場合もあるので、効きやすい指定に変更しました。

table:not(#specificity) tr:not([tabindex]){
display:none;
}
table:not(#specificity) .group-2:focus-within ~ tr.group-2,
table:not(#specificity)  .group-1:focus-within ~ tr.group-1{
 display:table-row;
}

サンプルはこちら、

https://www.tenman.info/wp3/emulsion/en/2022/11/04/%e8%a1%a8%e3%81%ae%e6%8a%98%e3%82%8a%e7%95%b3%e3%81%bf%e3%82%b5%e3%83%b3%e3%83%97%e3%83%ab/

• この返信は1年前にnobitaが編集しました。