I want to change footer to accordion style in mobile mode. Please help me!

Meadow21
Excursionist
16 0 6

Hello, Shopify talents.

 

I really want to change the footer section to accordion style. 

1. Current

Footer.JPG

2. My wish

accordion.JPG

 

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!

 

 

 

 

0 Likes
Quyen_Beo
Pathfinder
93 14 24

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();
    }
  });
});

 

Was my reply helpful? Please Like and ✔️ Accept Solution. This mean alot to me
0 Likes
King-Kang
Explorer
71 5 24

Hello @Quyen_Beo ,

Do you know how I could implement your solution in this code?

Thank you

print.png

{%- 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 -%}
0 Likes
Quyen_Beo
Pathfinder
93 14 24

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

Was my reply helpful? Please Like and ✔️ Accept Solution. This mean alot to me
0 Likes
King-Kang
Explorer
71 5 24

Thank you very much for your kindness @Quyen_Beo ,

I will try that one.

0 Likes
King-Kang
Explorer
71 5 24

Hello again @Quyen_Beo ,

Something happened 

Do you know how I can solve the missing buttons?

Thank you again
print_2.png

<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>

 

 

0 Likes
livingstonpars
New Member
1 0 0

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

0 Likes