Liquid, JavaScript, themes, sales channels
Hello, Shopify talents.
I really want to change the footer section to accordion style.
1. Current
2. My wish
I figured out this is called accordion style in bootstrap, and I've tried a number of times, but I failed to find a way how to link my custom css file to footer.liquid.
I'd really appreciate it if any of you give me any clue!
To achieve this you need a bit CSS and JS
Assuming that you have HTML like this
<div>
<h3 class="heading-title-class">About</h3>
<ul class="link-list-wrapper-class">
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div>
<h3 class="heading-title-class">Social Media</h3>
<ul class="link-list-wrapper-class">
<li><a href="#">Instagram</a></li>
<li><a href="#">Pintarest</a></li>
</ul>
</div>
CSS
@media (max-width: 767px) {
.link-list-wrapper-class {
display: none;
}
}
JS - need jQuery library
$(document).ready(function() {
$('.heading-title-class').on('click', function() {
if ($(window).width() < 768) {
$(this).next().toggle();
}
});
});
Hello @Be_Steven ,
Do you know how I could implement your solution in this code?
Thank you
{%- if section.blocks.size > 0 -%}
{%- liquid
if section.blocks.size == 9
assign footer_grid_class = 'grid--3-col-tablet'
elsif section.blocks.size > 6
assign footer_grid_class = 'grid--4-col-desktop'
elsif section.blocks.size > 4
assign footer_grid_class = 'grid--3-col-tablet'
endif
-%}
<div class="footer__blocks-wrapper grid grid--1-col grid--2-col grid--4-col-tablet {{ footer_grid_class }}">
{%- for block in section.blocks -%}
<div class="footer-block grid__item{% if block.type == 'link_list' and block.settings.heading != blank %} footer-block--menu{% endif %}" {{ block.shopify_attributes }}>
{%- if block.settings.heading != blank -%}
<h2 class="footer-block__heading">{{- block.settings.heading | escape -}}</h2>
{%- endif -%}
{%- case block.type -%}
{%- when 'text' -%}
<div class="footer-block__details-content rte">
{{ block.settings.subtext }}
</div>
{%- when 'link_list' -%}
{%- if block.settings.menu != blank and block.settings.heading != blank -%}
<ul class="footer-block__details-content list-unstyled">
{%- for link in block.settings.menu.links -%}
<li>
<a href="{{ link.url }}" class="link link--text list-menu__item list-menu__item--link{% if link.active %} list-menu__item--active{% endif %}">
{{ link.title }}
</a>
</li>
{%- endfor -%}
</ul>
{%- endif -%}
{%- when 'image' -%}
<div class="footer-block__details-content footer-block-image {{ block.settings.alignment }}">
{%- if block.settings.image != blank -%}
{%- assign image_size = block.settings.image_width | append: 'x' -%}
<img
srcset= "{{ block.settings.image | img_url: image_size }}, {{ block.settings.image | img_url: image_size, scale: 2 }} 2x"
src="{{ block.settings.image | img_url: '400x' }}"
alt="{{ block.settings.image.alt | escape }}"
loading="lazy"
width="{{ block.settings.image.width }}"
height="{{ block.settings.image.height }}"
style="max-width: min(100%, {{ block.settings.image_width }}px);"
>
{%- else -%}
{{ 'image' | placeholder_svg_tag: 'placeholder-svg placeholder' }}
{%- endif -%}
</div>
{%- endcase -%}
</div>
{%- endfor -%}
</div>
{%- endif -%}
Hi King-Kang
for your case
CSS
@media (max-width: 767px) {
.footer-block__details-content {
display: none;
}
}
JS, assumed your site already have jQuery
$(document).ready(function() {
$('.footer-block__heading').on('click', function() {
if ($(window).width() < 768) {
$(this).next().toggle();
}
});
});
Cheers
Hello again @Be_Steven ,
Something happened 🙂🙂
Do you know how I can solve the missing buttons?
Thank you again
<style>
@media (max-width: 767px) {
.footer-block__details-content {
display: none;
}
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('.footer-block__heading').on('click', function() {
if ($(window).width() < 768) {
$(this).next().toggle();
}
});
});
</script>
it's quite simple, if you know CSS, you can change it easily, I have created a website mobile responsive, and with my dream color schemes, visit
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024