Accordion footer for studio theme / Collapsable footer menu for studio theme

Store Design
1

Hello.

I have quite a few menu items on my footer. As a result on mobile it looks absurdly long. Does anyone know how to create an accordion/collapsable menu for the studio theme?

2

https://www.w3schools.com/howto/howto_js_accordion.asp

3

Thank you for responding.

Just to clarify, it will only affect the mobile footer menu right?

4

you need to add condition for css

@media screen and (max-width: 767px){ Add css here}

and j query

if ($(window).width() < 767) { jquery}
5

@media screen and (max-width: 767px){
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}

.active, .accordion:hover {
background-color: #ccc;
}

.accordion:after {
content: ā€˜\002Bā€™;
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}

.active:after {
content: ā€œ\2212ā€;
}

.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
}

Accordion with symbols

In this example we have added a "plus" sign to each button. When the user clicks on the button, the "plus" sign is replaced with a "minus" sign.

Section 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Section 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Section 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

6

Thank you for replying.

I donā€™t have a lot of experience coding. So if you donā€™t mind giving more guidance.

For example, where am I inputting this?

And in the text that says ā€œLorem ipsum dolorā€¦ā€ am I supposed to paste it with it?

7

if are agree to give access to your store then i can add this code for you , sppatil5599@gmail.com add me as staff

8

I have reached my staff limit. However, I can get you collaboratorā€™s access.

Hereā€™s the code 2817

9

can share you store link

10

Yes. It is www.nous-les-filles.com

11

I have sent you the password to your inbox.

12

Hello @sphurti and @nouslesfilles for reaching to an accepted solution.

Could you let me know where to add this code? is it in footer.liquid?

Thank you. very much

13

@Sphurti Looking forward to your advice