表をたたみたい
-
こんにちは。
表を作成しており、列が多い(50くらい)ので項目ごとにたたみたいのですが、うまくできません。何かいい方法はありませんでしょうか?
【CSS】コピペするだけ!アコーディオンボックスのつくり方
を参考にアコーディオンボックスを作ってみたのですが、展開した内容がテキストなら良いのですが、表にすると機能しませんでした。展開したい表の構成は、1列目が表題で、3行の内容を記載したいです。
表の作成には「Advanced Editor Tools」をしようしています。
-
7110naitoさん、こんにちは。
個人的な意見ですが、アコーディオンブロックを導入できるプラグインも探せばありますので、探してみてはいかがでしょうか。
ご参考になれば。
shokun0803さん こんにちは
返信ありがとうございます。「Shortcodes Ultimate」というプラグインで、アコーディオンブロックを作成し表示する部分にテーブルを入れることができました。
イメージ ←のように表にアコーディオン機能を持たせてたたむ方法が見つからず困っております。
助言を頂ければ幸いです。
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の検討が必要になるでしょう。-
この返信は4ヶ月、 2週前に
nobitaが編集しました。
nobitaさん こんにちは
返信ありがとうございます。
すいません。私は先月からワードプレスを触り始めた初心者で、HTMLとかCSSの編集ができません。
ただ表が表示されるだけで、アコーディオンの様にならないのですが・・・大変お手数ですが、具体的に教えていただけますでしょうか?
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; }
サンプルはこちら、
-
この返信は4ヶ月、 2週前に
nobitaが編集しました。
補足
<tr tabindex="0" class="group-1" style="background:#eee">
tabindex=”0″ を追加すると、クリックできるようになります。group-1 というのは、関連して開きたい行に追加します。
表示する行が10個あれば、それぞれgroup-2…group-10のように異なるクラスを割り当てます。対応するCSSも、併せて変更します
table:not(#specificity) .group-10:focus-within ~ tr.group-10, ... table:not(#specificity) .group-2:focus-within ~ tr.group-2, table:not(#specificity) .group-1:focus-within ~ tr.group-1{ display:table-row; }
意味は、group-xをクリックすると、フォーカスが働きますので、隣接するgroup-xを、テーブルの行として表示するという意味です。
table:not(#specificity) tr:not([tabindex]){ display:none; }
このCSSの意味は、tabindexという属性のない trは表示しない。という意味です。
ブロックエディタで、エラーが出るというのは、リンク先の画像を確認してください。
Convert to HTML をクリックすると、HTMLが表示されるので、編集できます。
ただし、マルチサイトの場合だと、まだ古いタイプのエラーになるので、マルチサイトだと編集できない可能性があります。
nobitaさん こんにちは。
大変詳しい返信ありがとうございます。
取り急ぎやってみたところ出来ました!!
nobitaさんのご説明がまだ理解できてませんが、勉強しながら修正していきたいとおもいます。
shokun0803さん、nobitaさんありがとうございました。またお願いします!!
@7110naito さん、こんにちは。
解決済みになってよかったですね!
さすがは nobita さんです。別解ですが、個人的に気になてちょっと調べてみたら、以下のような方法もあるようです。
HTMLとかCSSの編集ができません
とのことなので、今後勉強しながら理解していければいいですね!
以下のリンクの一番下のコードが希望の方法を実現しそうです。
WordPress 上の投稿だけで実施するには少し工夫する必要があるかな?
HTMLとCSSのみで、縮小/展開出来るテーブルを作りたい。ご参考になれば。
-
この返信は4ヶ月、 2週前に
- このトピックに返信するにはログインが必要です。