Accordion Buttons in Debut Theme

Solved
PETCLIP
Tourist
10 0 1

Hi there! Okay, this is my second try with the problem i have. The shopify-support didnt help me, because of the custom code.

I created an accordion with the (HTML5) "details" and "summary"-tags on my product pages. Unfortunately, the arrows are not shown in Firefox, but in Chrome everything works fine (see pictures ...)

Here is a code-example:

<details><summary class="Akkordion">Produktdetails</summary>
<ul style="margin-bottom: 10px;">
<li>Material: Lederband (Rind) mit Karabiner aus 925-Silber</li>
<li>Maße: ø 3 mm</li>
</ul>
</details>

Any ideas?? Thx – Andy.

 

Chrome:

accordions_chrome.jpg

 

Firefox:accordions_firefox.jpg

KetanKumar
Shopify Partner
20378 2110 7661

@PETCLIP 

Thanks for post.

Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
PETCLIP
Tourist
10 0 1

Hi Ketan, thanks for the reply!

The adress is

https://shop.petclip.de/

and the password is

mimpox

0 Likes
KetanKumar
Shopify Partner
20378 2110 7661

This is an accepted solution.

@PETCLIP 

Thanks for URL.

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

summary::-webkit-details-marker {
  display: none
}
summary:after {
  background: red;
  border-radius: 5px;
  content: "+";
  color: #fff;
  float: left;
  font-size: 1.5em;
  font-weight: bold;
  margin: -5px 10px 0 0;
  padding: 0;
  text-align: center;
  width: 20px;
}
details[open] summary:after {
  content: "-";
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
PETCLIP
Tourist
10 0 1

Hi Ketan, thank you so much. Its a way we can work with. i modified it a bit. I wish you a nice weekend!!

0 Likes
lyva
New Member
1 0 1

@PETCLIP could you please share your code for accordion? I'm struggling to find code that works with Debut theme. 

KetanKumar
Shopify Partner
20378 2110 7661

Hello, @PETCLIP 

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Lynnette_Tonkin
Tourist
7 0 0

Hi Kentan, 

 

I'm also struggling to find any code that will implement an accordian.  I'm currently forced to use an app (see the FAQ/Delivery Info at top of screen) however I would like to simply have the accordian on a "page" not associated with an app.  

 

Please let me know if you can help.

 

https://www.treegifts.co.nz/

 

 

0 Likes
KetanKumar
Shopify Partner
20378 2110 7661

@Lynnette_Tonkin 

It can be done by doing some code customization. Please take the help of a developer and hire Shopify Expert or me

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Lynnette_Tonkin
Tourist
7 0 0
Thanks - found some free code online, now sorted
0 Likes