Hello everyone,
I’m using the new Dawn theme, and I’m looking to have my footer menu, as an accordion, in mobile view.
Can you help me with this survey?
Thank you
Topic summary
Users seek to implement an accordion-style collapsible footer menu for mobile view in Shopify’s Dawn theme. The main challenge involves making footer sections expandable/collapsible with +/- icons on mobile devices while keeping them static on desktop.
Primary Solution:
Mr_RaviRaj provided CSS and JavaScript code to add to footer.liquid that creates the accordion functionality. The code uses media queries to target mobile screens (max-width: 749px) and adds click handlers to footer headings.
Common Issues & Refinements:
- Default state problem: Multiple users reported accordions opening by default instead of being collapsed
- Working solution: Moniox95 and vinceservidad shared updated code that sets
block-collapsedclass by default, ensuring sections start closed - Auto-close behavior: Some requested that opening one section automatically closes others (unresolved)
- Selective application: Users want to exclude certain footer blocks (like social media or newsletter signup) from accordion behavior
Theme Compatibility:
The solution works primarily for Dawn theme (versions 2.5.0 through 11.0.0 confirmed). Users with other themes (Prestige, Sense, Debutify) requested adaptations, with suggestions to modify the provided code or use alternative CodePen examples.
Code snippets and implementation details are extensively shared throughout the thread.
yes please try and modification code if have able to code or let me know
Hello @KetanKumar , how are you?
I know that it could be done from scratch and hide this one in mobile view, however would be awesome to edit this code if possible, to keep the liquid file as clean as possible.
Thank you
1 Like
It can be done by doing some code customization. Please take the help of a developer and hire Shopify Expert or me
Anyone already found a solution for this?
Thank you
1 Like
Thank you for the reply @KetanKumar
Already tried this one, but the arrows do not show for some reason :s
1 Like
can you please share store url
i saw you are having issues and this worked for me
Hello @Mike1974 ,
I saw your post in another thread about this topic, I solved it by hiding on mobile, and made an accordion footer code just for mobile and hiding on desktop.
Your solution looks good, but since I was on a budget, I had to figure it out by hand.
Add this code in the bottom of footer.liquid file,
if you are not able to add it let me inform i will add it to your theme.
Note: this solution is only for Dawn theme, if you want the solution for your custom or other theme let me inform,
we will build for you.
<style>
@media (max-width: 749px) {
.grid .footer-block.grid__item {
margin: 0;
}
.grid .footer-block__heading {
position: relative;
margin: 0;
padding: 1.5rem 0;
cursor: pointer;
}
.grid .footer-block__heading::after {
content: "+";
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 20px;
text-align: center;
}
.grid .footer-block__heading:not(.block-collapsed)::after {
content: "-";
}
.grid .footer-block__heading.block-collapsed + .footer-block__details-content {
visibility: hidden;
opacity: 0;
height: 0;
margin: 0;
padding: 0;
transition: all .2s ease-out;
overflow: hidden;
}
.grid .footer-block__heading + .footer-block__details-content {
visibility: visible;
opacity: 1;
height: auto;
transition: all .2s ease-out;
overflow: hidden;
margin-bottom: 3rem;
}
}
</style>
<script>
window.addEventListener('DOMContentLoaded', () => {
if (window.matchMedia('(min-width: 750px)').matches) {
return
}
const handleCollapse = (heading) => {
if (heading.classList.contains('block-collapsed')) {
heading.classList.remove('block-collapsed')
heading.setAttribute('aria-expanded', 'true')
} else {
heading.classList.add('block-collapsed')
heading.setAttribute('aria-expanded', 'false')
}
}
document.querySelectorAll('.grid .footer-block__heading').forEach((heading, index) => {
heading.classList.add('block-collapsed_new')
heading.setAttribute('role', 'button')
heading.setAttribute('aria-expanded', 'false')
heading.setAttribute('tabindex', '1')
heading.nextElementSibling.setAttribute('id', `footer-block-index-${index}`)
heading.setAttribute('aria-controls', `footer-block-index-${index}`)
heading.addEventListener('click', () => { handleCollapse(heading) })
heading.addEventListener('keypress', () => { handleCollapse(heading) })
})
})
</script>
5 Likes
Hello @Mr_RaviRaj ,
Thank you for helping me in this survey.
Already accepting your answer as a solution, because it’s already an accordion!
I tested it in Dawn theme (5.0.0)
Can you help me fix two things in your script?
-
Make every accordion tab closed as default.
-
When one tab is open the other closes automatically.
Thank you in advance
1 Like
1 Like
Thank you @Mr_RaviRaj
I would like to make every footer accordion tab closed as default and when one tab is open the other closes automatically. Is that possible?
You have code for prestige theme please ?
1 Like
can you please share store url?
How to make every footer accordion tab closed as default? I put em successfully but it is by default collapsed already. Please help.
1 Like
Hi @Mr_RaviRaj @King-Kang @NS2982
Thank you it works perfectly fine with DAWN 2.5.0. Is there a way that the accordions tabs are closed at first. As all of them are open in the beginning/default?
1 Like