この記事を読んでいる方ならご存知のこととは思いますが、
私は2つの動画データベースサイトを運営しています。
VK Filter Search Proやアコーディオン表示などの検索でここに辿り着いた方のためにご説明しますと、
ゲーム実況者の動画を、ゲームタイトルや出演者などの条件で絞り込み検索できるサイトです。
ご興味がありましたら、こちらから
我々だ非公認広報室
ワイテルズ非公認情報室
これらのサイトはその性質上、どうしてもタグが多くなり過ぎ、検索画面が非常に長くなってしまい、ユーザーから改善してほしいとの声がありました。
もちろん言われるまでもなく、管理人本人も不便だと思っておりましたので、タクソノミーごとにアコーディオン表示にすることにしました。
しかし、検索画面はVK Filter Search Proを使用しており、デフォルトでアコーディオン表示の機能が無く一筋縄ではいかなかったため、備忘録として記事にします。
どんな感じのアコーディオンになったのか気になる方は先に実際のサイトをご覧ください。
注意事項
この記事はWebサイト制作の素人が試行錯誤の記録を記事にしたものです。
もっとスマートな他の方法があったり、
VK Filter Search Proの使用方法として正しくなかったりする可能性があります。
当記事の手法を真似てトラブルになったとしても責任を負いかねますので、
お試しになる際はバックアップを取った上で、自己責任でお願いします。
やりたかったこと
動画データベースのタグは、これを書いている2024年7月現在で900以上あり、現在も尚増え続けています。
1つのタクソノミーの中に、多いものだと200以上もあり、画面は縦に長く長くなっていきます。
（この形態が動画検索サイトとして理想の形なのかどうかは置いといて）
これを、
このように、
アコーディオン表示にして、必要な時だけクリックで開くようにしたかったわけです。
考え方
アコーディオン表示を実現するために必要なこととして、
・タイトル部分をただのテキストではなく、クリックでON/OFFを切り替えられるようにする
・タイトル部分のON/OFF状態に連動して、内容の部分が出たり消えたりする
この２点があげられます。
プラグインを使用せずに自分でソースコードを記述するのであれば、
HTMLでタイトル部分をチェックボックスにし、CSSで通常時とクリックされた時の表示を切り替えるようにすればいいわけです。
参考記事：【JavaScript不要】CSSだけでアコーディオンメニューを作る方法
問題は、タイトル部分も内容部分もVK Filter Search Proが自動で作ってくれるので、どうやって手を入れたらいいの？そもそも可能なの？ということでした。
ヒントとなったのは、VK Filter Search Proをおしゃれにカスタマイズする、という記事でした。
参考記事：【VK Filter Search Pro】検索フォームをCSSでオシャレにアレンジしよう！
VK Filter Search Proでは、タイトル部分に該当する”ラベル”をタクソノミーの名前そのものではなく自由に書き換えられるのですが、そこに
このようにHTMLを記述できたんですね。
まずこれで、タイトル部分をチェックボックスにすることが出来そうです。
次にタグが並んでいる内容部分を出したり消したりできるか、というところです。
CSSで記述するなら、HTML側でidを指定しておいて、VK Filter Search Proが自動で生成した部分と紐づければいけそうな気がします。
ここで躓いたのが、VK Filter Search Proが自動で作ってくれたタイトルと内容が兄弟関係ではない、と言うことでした。
参考記事：CSSの擬似クラス:checkedの使い方と効かない時の解決方法
兄弟関係でないと、よく使用されている隣接セレクタ（+）では指定できないため、ひと工夫する必要がありました。
結論から言いますと、擬似クラスの:has()を使って、内容部分を特定すればよかったわけです。
参考記事：【CSS擬似クラスの:has()】つまり、子から親を探せるというコトです
これで諸々の問題が解決しました。
次からは実際に記述したコードを説明します。
検索画面側の変更
検索画面を作成する固定ページで、ブロックのラベルにHTMLを記述し、タイトル部分をチェックボックスにします。
本来であれば「検索したいゲームタイトルにチェックを付けてください」とか入力する用途なのだと思いますが、ここにソースコードを直接書き、タイトル部分をチェックボックス化します。
当サイトでは、ついでに「▼クリックで開く」とテキストを追加しましたが、アイコンなどを表示させてもおしゃれかもしれません。
<input id="check01" type="checkbox"><label for="check01">ゲームタイトル ▼クリックで開く</label>チェックボックスのidはタクソノミーごとに変える必要があります。
また、次のCSSでも使用するため、判別しやすいidにしておくといいでしょう。
ラベルをチェックボックス化したことで、画面上にはタイトル部分と重なるようにチェックボックスが表示されますが、CSSを追加することでサイト上では表示されなくなりますので、今の段階では無視してよいです。
追加CSSの変更
カスタマイズの追加CSSを編集します。
ここでは、
・タイトルと重なって表示されているチェックボックスを見せないようにする
・チェックボックスがOFFの時に折りたたむ
・チェックボックスがONの時に表示する
・ついでにちょっと動きを付けておしゃれにする
ということをします。
まずは、タイトルと重なって表示されているチェックボックスを見せないようにします。
/*チェックボックス非表示*/
#check01{
display: none;
}ここで、先ほどのチェックボックスのidを指定します。
次に、チェックボックスがOFFの時の設定です。
/*OFFの時に折りたたむ*/
#vkfs_taxonomy01{
height: 0;
overflow-y: hidden;
transition: 0.8s;/*ゆっくり表示させる*/
opacity: 0;
}ここで指定しているvkfs_taxonomy01は、VK Filter Search Proが自動で作成してくれるものなので、ブラウザでサイトを表示し、デベロッパーモード等で確認するのが確実です。
恐らく大抵は”vkfs_”の後にタクソノミーの名前になっていると思います。
この辺を選択し、<ul id=”vkfs_～～～～～”となっているところを探します。
最後に、チェックボックスがONになった時に表示させる設定です。
/*チェックボックスがONの時に表示する*/
.vkfs__label-name:has(#check01:checked) + ul{
height: auto;
opacity: 1;
}ここが少し躓いたところでした。
タイトル部分と内容の部分を直接、隣接セレクタで～～～～ + ～～～～～としても連動しませんでした。
そこで、has(#check01:checked)とすることで「チェックボックスがONになっているcheck01を持ってるひと」という設定にするんですね。大変勉強になりました。
参考記事：【CSS擬似クラスの:has()】つまり、子から親を探せるというコトです
まとめ
ざっくりまとめますと、
・VK Filter Search Proの検索画面はラベルにコードを書ける
・VK Filter Search Proで生成されたタイトル部分と内容部分は別物
・HTMLでチェックボックス化
・追加CSSでON/OFF切り替え（ただし :has() を使うこと！）
これだけ知っていれば、アコーディオンメニューが作れるかと思います。
どなたかのサイト制作のヒントになれば幸いです。