FROM CACHE - jp_header
このコミュニティはピアツーピアサポートに移行しました。Shopify サポートは今後、このコミュニティへのサービスを提供いたしません。これからもぜひ、他のマーチャントやパートナーとつながり、サポートし合い、経験を共有してください。 当社の行動規範に違反する行動や削除を希望するコンテンツがありましたら、引き続きご報告ください

Dawn 14.0.0 でアコーディオンの三角が表示されない

解決済

Dawn 14.0.0 でアコーディオンの三角が表示されない

mpex
観光客
10 1 3

Dawn 14.0.0.0でdetailsとsummaryを使用したアコーディオンを作成しています。

ページエディタでは三角が表示されていますが、プレビューで見ると三角が消えてしまいます。

テスト環境はWindows 11とChromeです。

以下のようにCSSで表示する設定にしてもダメでした。

 

[HTML]

<details>

  <summary class="summary-1">アコーディオン</summary>
</details>

 

[base.css]

.summary-1 {
  display: list-item;
}

 

どのようにすれば三角を表示できるかわかりますでしょうか。

凝ったアコーディオンではなく、単純なデフォルト状態の三角が表示できればそれで十分です。

1 件の受理された解決策

Qcoltd
Shopify Partner
1170 473 458

成功

@mpex

 

Dawn 14.0.0のテーマですと、base.cssの629行目あたりにある下記コードの「list-style: none;」で三角を非表示にしています。

 

/* base-details-summary */
summary {
  cursor: pointer;
  list-style: none;
  position: relative;
}

 

ただ、上記のsummaryのlist-style: none;を消してしまうと、テンプレートで使用している、

他のsummaryにも影響してしまいますので、下記の様にすると良いかと思われます。

 

detailsにclassを設定

 

<details class="accordion_box">
  <summary class="summary-1">アコーディオン</summary>
</details>

 

 

base.cssに下記を追記

 

.accordion_box summary {
  list-style: revert !important;
}

 

 

ご参考まで。

(キュー小坂)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/

元の投稿で解決策を見る

2件の返信2

Qcoltd
Shopify Partner
1170 473 458

成功

@mpex

 

Dawn 14.0.0のテーマですと、base.cssの629行目あたりにある下記コードの「list-style: none;」で三角を非表示にしています。

 

/* base-details-summary */
summary {
  cursor: pointer;
  list-style: none;
  position: relative;
}

 

ただ、上記のsummaryのlist-style: none;を消してしまうと、テンプレートで使用している、

他のsummaryにも影響してしまいますので、下記の様にすると良いかと思われます。

 

detailsにclassを設定

 

<details class="accordion_box">
  <summary class="summary-1">アコーディオン</summary>
</details>

 

 

base.cssに下記を追記

 

.accordion_box summary {
  list-style: revert !important;
}

 

 

ご参考まで。

(キュー小坂)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/
mpex
観光客
10 1 3

三角が表示できました!

ありがとうございます。