FAQ Accordion Section

[jessjessanders]

Hi everyone, 

I am hoping to add an FAQ section to my online coaching page.

I like the format where all the questions are layered on top of each other, with a cross to click the answer open. 

If there is appropriate HTML and CSS code for this, I'd love to add it to my website.

I'd appreciate your feedback and assistance, 

--

Website: https://sharnie- cocks.myshopify.com/      (no spaces)
Password: reiffa

[KetanKumar · Accepted solution]

@jessjessanders 

Thanks for post 

are you able to code can you please try this or if not so please sent a personal message i will do this 

https://codepen.io/Chris5656/pen/wJbMEd

[jessjessanders]

Thank you, this is exactly what I was looking for 🙂 
Much appreciated.

[KetanKumar]

@jessjessanders 

it's my pleasure to help us

if you need more help please contact here email: bamaniyaketan.sky@gmail.com

[Phoebe19]

Hi,

How to I add the JS section on the theme?

[KetanKumar]

@Phoebe19 

sorry for any issue please add your custom js on theme.js file

[Phoebe19]

How do I add this? Do you have the step by step information on how to do this?

[KetanKumar]

@Phoebe19 

1 - create your custom page template 

2  - after new page template add new section doe faqs

3 - thene copy and past section on new section fiels 

4 add your css file to theme csss

5 your js file add theme js file 

[Dihan]

@KetanKumar 

Just to keep code clean, if you were to add them as accordion.js and accordion.css would the asset folder automatically compile like rails?

[KetanKumar]

@Dihan 

yes, current 

[sonika2502]

where do you place the html js and css code

[KetanKumar]

@sonika2502 you have pute this your custom page to html code and css code on your css file depend on your theme

[sonika2502]

and js file

[KetanKumar]

@sonika2502 

your theme jf file bottom of the page

[orange1989]

This is very neat. @KetanKumar 

I just don't know how to add this on theme builder. Where do I start? I use parallax theme

[KetanKumar]

@orange1989 

can you please share store url

[Tara_Snow]

I copied your code and placed it on my page but it is still now showing correctly (how it shows on your site when I edit it). https://taralynnsboutique.com/pages/moissanite-vs-diamond

[jaswant55]

hello sir how i want to add content dynamically on my shopify hydrogen app. what process should i followed. i want to add the content dynamically on my about us page how can i do. i dont have any idea

[KetanKumar]

@jaswant55 

oh sorry for that issue can you please share

[Yougurt]

Hi Jesse,

I've created one you ca use in Shopify's native language so it works from the customiser (where you customise sections for your frontpage). Super simple.

You dont even have to tinker with the code yourself: https://www.rainbowmake.com/free-faq-template-for-shopify

I hope it helps you :-)!

/Daniel

[Mircea_Piturca]

I have an FAQ section you can freely download. Please see: https://sections.design/blogs/shopify/faq-rich-snippets-section

Code is available at: https://github.com/mirceapiturca/Sections/tree/master/FAQ

Hope it helps

[KevinM1]

Thank you so much!, The FAQ is Awesome!!!!!. 

[KetanKumar]

@KevinM1 

Wow Thant would be great 

thanks for update

[cid_gk]

Hi there, this is awesome! How can I make the questions/headings automatically lowercase? 

[soulchild37]

Heya,

I have made a simple FAQ accordion generator here : https://accordion.yagisoftware.com .

You can type in the FAQ sections title and content there, then generate the HTML code, which you can paste into your product / pages / blog post editor in "show HTML" mode, and thats it! No need to tinker with theme code.

Hope this helps!

[Marloes_MC]

@soulchild37  Thank you very much for this, works perfectly!

[KetanKumar]

@Marloes_MC 

its my pleasure to help us