How can I incorporate an accordion into my website footer?

Store Design
1

Hello, I have lots of legal pages on my footer (refund, …) and would like to have an accordion that contains them all instead of having them all there.

Is there an App or a code to do it?

Thank you!

2

hi @Masaru can you please share your store URL so I can help you out in this issue.

Thanks

3

https://meritts-jp.com

4

@Masaru what theme you are using and in theme customization use two menu blocks so you can show properly pages in the footer if you can understand do it or simply check inbox for a quick solution with live free help by us for you!

5

I use Debut

What do you mean by “Menu Blocks”?

6

@Masaru

Hi please have a look at this video I created for you

Footer Menu Tutorial

7

That is not an accordion…

An accordion is a menu that you can open and close…

Google it please

8

while creating a menu put menu items as sub-menus when you hover on the footer menu it will open like subcategories or if you are talking about collapsable tabs with a menu in it then I have to look into it again!

@Masaru

9

I am talking about accordion menus like those ones:

Screenshot_80.png
Screenshot_80.png388×278 6.33 KB

10

Yes @Masaru yes, sure If you’re comfortable working with coding languages (eg. HTML, JavaScript, CSS, and Liquid), then you can try to follow the custom coding provided by Mobile Code
or Let me know if don’t able to this

11

Uhm I am not sure… Where do I have to put them?

If it is ok for you, could you record a video like before to explain me?

You could paste the code on a dummy Debut theme for example.

Hope this doesn’t bother you!

12

Hello, I tried to add the codes but didn’t work… I think I might have done it wrong

Could you please send me a vid where you explain?

13

@KetanKumar

Hello, I am so sorry to bother you.

Would you have a solution for this problem please?

14

@Masaru

thanks for yes it can be done some customization code

15

Ok thank you. Do you know the code that does it?

16

@Masaru

It can be done by doing some code customization. please send me a personal message and we can discuss what you’d like

17

https://ecomgraduates.com/products/dawn-theme-accordion-footer

this works if you follow the read me file when you download it

18

i found this tutorial and worked wellhttps://www.youtube.com/watch?v=Gxgj_HTOzsY

19

I use Debut and not Dawn, does it still work?

Any solution with Debut?

20

basically you would grab the classes and add this to them to transition

.grid .footer-block__heading + .footer-block__details-content {
    visibility: visible;
    opacity: 1;
    height: auto;
    transition: all .2s ease-out;
    overflow: hidden;
    margin-bottom: 3rem;
  }