Evrig

+1 512-5822-377

Get in Touch

Magento 2 Collapsible Widget: A Step-by-Step Guide

  • December 11, 2024
  • Category: Magento 2
No Comments

The collapsible widget converts a header/content pair into an accordion, where the content is collapsed or expanded on the header click.

Magento 2 provides a versatile collapsible widget that is perfect for implementing features like collapsible sections. Like we can use in the footer, where space is limited, and you want to keep the interface clean while ensuring easy navigation.

In this blog, we’ll go through the steps to make the footer links collapsible using Magento 2’s collapsible widget.

1. Create a CMS Block

Navigate to the Magento Admin Panel and create a CMS block:

Path:
Content > Blocks > Add New Block

  • Block Title: Footer Collapsible Links
  • Identifier: footer_collapsible_links
  • Content: Add the collapsible HTML structure:

 

Copy Code 


<div class="footer-links">
   <div class="collapsible-section" data-mage-init='{
   "collapsible":{
       "collapsible": true,
       "openedState": "active",
       "animate":{ "duration" :1000, "easing":"easeOutCubic"},
       "active": true
   }}'>
       <a class="collapsible-title" href="javascript:void(0)" data-role="title">
           About Us
       </a>
       <div class="collapsible-content" data-role="content">
           <ul>
               <li><a href="/about-us">Who We Are</a></li>
               <li><a href="/contact-us">Contact Us</a></li>
           </ul>
       </div>
   </div>
   <div class="collapsible-section" data-mage-init='{
   "collapsible":{
       "collapsible": true,
       "openedState": "active",
       "animate":{ "duration" :1000, "easing":"easeOutCubic"},
       "active": true
   }}'>
       <a class="collapsible-title" href="javascript:void(0)" data-role="title">
           Customer Service
       </a>
       <div class="collapsible-content" data-role="content">
           <ul>
               <li><a href="/shipping">Shipping Info</a></li>
               <li><a href="/returns">Returns Policy</a></li>
           </ul>
       </div>
   </div>
</div>

Save the CMS block.

2. Add the CMS Block to Footer

Modify the layout XML to include your CMS block in the footer section.

File Path:

app/design/frontend/<Vendor>/<Theme>/Magento_Theme/layout/default.xml

XML Code:

Copy Code 


<referenceContainer name="footer-container">
   <block class="Magento\Cms\Block\Block" name="footer_collapsible_links">
       <arguments>
           <argument name="block_id" xsi:type="string">footer_collapsible_links</argument>
       </arguments>
   </block>
</referenceContainer>

3. Add the JavaScript

Include the collapsible functionality by creating a JavaScript file:

app/design/frontend/<Vendor>/<Theme>/web/js/footer-collapsible.js

JavaScript Code:

Copy Code 


define(['jquery', 'mage/collapsible'], function ($) {
   'use strict';


   $(document).ready(function () {
       $('.collapsible-title').collapsible({
           active: false, // Collapsed by default
           collapsible: true, // Allow collapsing
           animate: 200 // Animation speed in ms
       });
   });
});

4. Use requirejs-config.js for Custom Module Mapping

To load your custom JavaScript with Magento’s standard RequireJS configuration, use requirejs-config.js.

File Path (Theme):

app/design/frontend/<Vendor>/<Theme>/requirejs-config.js

Example Code:

Copy Code 


var config = {
   map: {
       '*': {
           footerCollapsible: 'js/footer-collapsible'
       }
   }
};

5. Add Require Styles

6. Deploy Static Content

Copy Code 


bin/magento setup:static-content:deploy
bin/magento cache:clean

Transform your Magento 2 footer into a sleek, functional navigation tool with collapsible links! These features not only enhance usability but also create a polished, modern interface for your customers.

Get Started Today!

Whether you need expert guidance, custom solutions or ongoing support, we’re here to help take your e-commerce store to the next level.

Contact Us to explore more solutions for your e-commerce store!