Want to keep the footer section of my website in accordion style in mobile mode ( Boost Theme )

[dreamtechzone_5]

Hello Everyone!

I want to keep the footer section of my website in accordion style in mobile mode. Please help me. Thank you.

Store: https://urbanglowingstore.myshopify.com/

Password: Admin

I want to keep it like the image below.

[Small_Task_Help]

Hi,

Hope this will help

Add Accordion Code to Footer

Code example

<style>
  @media screen and (max-width: 768px) {
    .footer-section {
      border-bottom: 1px solid #ddd;
    }
    .footer-title {
      cursor: pointer;
      padding: 10px;
      background: #f8f8f8;
      font-weight: bold;
    }
    .footer-content {
      display: none; /* Hide content initially */
      padding: 10px;
    }
  }
</style>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    if (window.innerWidth <= 768) { // Apply only on mobile
      document.querySelectorAll(".footer-title").forEach(function (title) {
        title.addEventListener("click", function () {
          let content = this.nextElementSibling;
          if (content.style.display === "block") {
            content.style.display = "none";
          } else {
            content.style.display = "block";
          }
        });
      });
    }
  });
</script>

<div class="footer-section">
  <div class="footer-title">About Us</div>
  <div class="footer-content">
    <p>We offer the best glowing products for you!</p>
  </div>
</div>

<div class="footer-section">
  <div class="footer-title">Customer Service</div>
  <div class="footer-content">
    <p>Shipping, returns, and more.</p>
  </div>
</div>

[dreamtechzone_5]

Where do I paste this code?