こんばんは。
Studioの実装や案件での学びをTipsとして残していきたいと思います。

今回は、Studio機能では実装の難しいアコーディオンの実装例と実装方法を紹介します。

アコーディオンはFAQやメニュー詳細を記載したいけど少しページが雑多な印象になってしまう…

といった際に、全体をすっきりと見せられるのが良いですよね。

一方で情報の検索性が落ちると言ったデメリットもあるため、用途に合わせて上手に活用したい機能です。

１. 機能実現イメージ

まずはゴールイメージを合わせていきましょう。

この実装例の主な特徴を挙げると以下の３点です。

1. 各Qボックスの右側の＋ボタンをクリックするとAボックスが出てくる。

2. ＋ボタンクリック時に＋が回転して×になり、×クリックでAが閉じる。

3. モバイルサイズでもアコーディオンが実現できている。

アコーディオンで重要なのは１と３。
カスタムCSSであるため、モバイル用にボックスのpaddding等を変更したい場合には、PCとモバイル用は別々に用意する必要があります。

２番は少し小洒落た感じにするためのおまけという感じですね。
実態としては、＋以外でもQボックスエリアをクリックすればAが開いたり閉じたりします。

それでは概要感はこの辺にして、実装方法に進みましょう。

２. 実装方法

-参考サイトを見てみよう！

動画はStudioコミュニティの以下の投稿を参考に、デザインに合わせてカスタマイズしたものとなります。

まずはこちらのコミュニティを確認してみてください。studioでのレイヤー構造とCSSを共有くださっています。

こちらで実装できた方は今回投稿でアコーディオンに関してこれ以上の情報は特にありません。

-実装方法はどれが良い？

アコーディオンの実装方法としては、JavaScriptを使用する方法もWebで紹介されています。

しかしながら、JavaScriptを使用する場合には大前提としてGoogle Tag Managerとの連携が必要である点、変数定義やアクション定義等CSSを書くよりもコードの複雑性が上がる点が、ノーコーダーにはとっつき難い点ですよね。

また、動画のFAQはCMSに接続しており、そうした場合にも実装には影響しない点も扱いやすい点です。

ただし、特定のID等ではなく階層構造に紐づいたものになるので、他の箇所に影響しないかは要確認。
この点は後ほど触れます。

-もう少し詳しい説明求ム！

という方、おかえりなさい。
少しだけ詳細な説明を加えた実装方法を書いていこうと思います。
（TomockyさんへのLikeはお忘れなく！）

まずはゴール状態の解釈から見ていきましょう。
ゴールの状態はTomockyさんの投稿の通り以下の２点です。

（１）HTMLにあたるStudioのパーツで以下の階層を作ること

<label>　　　　　・・・inputを含むボックスにおけるタグです。①
  <div>　　　　　・・・QAのQのボックスをこのdiv配下に配置します。②
  <input>　　　　・・・アクションを検知するためにチェックボックスを擬似的に使います。③
  <div>　　　　　・・・QAのAのボックスをこのdiv配下に配置します。④
  <i>　　　　　　・・・本投稿の実装でいうところの＋ボタンになります。⑤

（２）カスタムCSSを作成しiframeに設定すること

いったんTomockyさんの投稿にあるCSSをそのまま貼り付けます。

<style>

//input+div構造箇所＝studio側④のデフォルトレイアウトを設定
input + div {
    height: 0;　　　　　　　・・・▲
    opacity: 0;　　　　　　　
    visibility: hidden;　　・・・＊
  }

//②のエリアクリック＝③✅＝奇数回クリック時のレイアウトを設定  
input:checked + div {
    height: auto;　　　　　・・・▲
    opacity: 1;　　　　　　　
    visibility: visible;　　・・・＊
  }

//check時の⑤のアイコンのレイアウトを設定    
input:checked + div + i {
    transform: scaleY(-1);
  }

</style>

▲と＊を書いた２箇所がアコーディオンに最低限必要な設定になります。
＊：Aボックスがhiddenからvisibleに変わる
▲：Aボックスが開いた時に高さをauto（任意のpxでもOK）で設定

留意事項としてCSSの内容で上書きする際には、
各設定値の後に「!important」をつける必要があるそうです。
例えばこんな感じです。

input + div {
    height: 0 !important;
    opacity: 0 !important;　　　　　　　
    visibility: hidden;
  }

また、前述の通り特定のIDに対して機能するわけではなく、アコーディオンを意図していないけれど同じ構造の箇所があるという場合にも、本仕様が適用されてしまう点には注意が必要です。

そのようなケースが考えられる場合には、素直にJavaScriptで書くのが良いでしょう。

-実装してみよう！

（２）のCSSについては、height / opacity以外にもアイコンのようにscale等他のプロパティを設定することも可能です。

こちらは例も豊富で参考になりそうです。
みなさん好みのCSSを作成してみましょう。

（１）については、一応Studio上での設定手順を見ておきましょう。

• はじめに、コードエリアに記載した基本の階層構造を作ってしまいましょう。

• この時、QとAは同じ階層になります。とても雑ですがこんな感じ↓。

• 次にパネルからチェックボックスを選んでエディターに配置しましょう。

• チェックボックスはリストで出てきてしまうので、他ボックスに影響のない適当な位置に配置し、レイヤーの方で１組をコピーして持ってくると階層が作りやすいです。

• <span>等の不要な要素は削除して問題ありません。

• QボックスとAボックスを挟むように配置し、全体が<label>の中に入るようにします。

階層としては次で最後になります。

• 任意のiconを<label>配下、Aボックスの次に配置します。

レイアウトを整えます。

• チェックボックスはレイアウト上表示されていると見栄えが悪いので、非表示にしてしまって問題ありません。

• アイコンは絶対位置に変更し、Qボックスの上などに配置します。アイコンを表示したくない場合には、透過設定等をしておくと良いでしょう。

• 階層を変更しないようにQとAのそれぞれのボックスの中を整えていきます。

さて、ここまでできたらCSSを設定します。
<iframe>をQAボックスよりも上に配置します。

iframe自体はレイアウト上表現したいものではないので、ボックスサイズを最小化して邪魔にならないところに配置しておきましょう。

その中に作成したstyleを貼り付けます。
エディター上こんな感じになっていればおそらく成功です。

このサンプルでは、私はiconクリック時にハートがピンクになるように設定しているので、以下のようになりました。

できましたでしょうか？

-うまくいかない場合はチェック！

もう一度、以下の点をチェックしてみましょう。

出てきたAボックスのレイアウトが気に入らないという場合には、CSSの設定要素を増やして調整してみると良いかと思います。

モバイルとpadding等を分けたい場合には、他のレスポンシブ同様、想定端末によってCSSの表示/非表示を切り替えることで実現可能です。

CSSはいくつかの例をみているうちに、記述の際の公式なども自然とわかってくるかと思います。

サンプルは多い方が良いということで、こちらで使用したものと動画のサンプルのものについては次のセクションに掲載しています。

難しい内容ではないのでもし必要な方がいらっしゃればアクセスしてみてください。

それでは、いったんここで中締めとなります。
次回はこのCSSを元に親子関係を持たないボックス間でのホバー設定を試してみた結果を掲載予定です。

それではまた。