d
Topic
Etienne Member
Posts:
6
10 months ago
g
4
upvotes

Debut theme, adding an accordion section

Hi,

I'm using the new debut theme and I would like to implement this nice acordion : http://codepen.io/samsurysites/pen/qxHJK/

How should I do to get it done in the cleanest way, is there a possibility to add a "section" that handle what would be inside it and the colorcode?

 

Thanks !

i
Replies
Posts:
27
9 months ago
g
2
upvotes

I would love to do this too! can anyone help? 

Posts:
2
5 months ago

I am also having trouble implementing this. I can get it to work in Jumpstart and in Venture easily enough, but not in Debut (even though everything is the same).

Posts:
3
11 days ago

Were you able to resolve this, Kevin? I am having the same issue in the Debut theme.

mcropper Member
Posts:
2
Last edited 10 days ago

I got this to work. You can do it by using inline JS, inside a script tag.  It must be eclosed in the same parent div as the accordian div. that way it doesnt mess with the global JS styles of the theme

So using the codepen example it would go inside the container div inside 

<div class="container">
    <script>...JS from codepen JS</script>
    <div class="accordian">
    ....
    </div>
</div

For good housekeeping and if you are re-using it across the site then store the <script>...</script>  in an accordian.liquid snippet and call inside the parent div:

{% include 'accordian' %}

 

Hope this helps.

EDIT: I should add that shopify doesnt work well with compiling @import so simply copy any required CSS code ( in this case: https://fonts.googleapis.com/css?family=Lato:400,700) and paste to your own CSS file.