JSFiddle - React, Tailwind, and code Playground

by vikastyagi87

HTML

<div class="footer-widgets d-lg-flex">
  <div class="footer-widget footer-widget-3">
    <div id="nav_menu-1" class="widget widget_nav_menu">
      <span class="gamma widget-title">Contact</span>
      <div class="menu-footer-section-3-container closed">
        <ul id="menu-footer-section-3" class="menu">
          <li id="menu-item-1628" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1628">
            <a href="/Contact/">Contact</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="footer-widget footer-widget-4">
    <div id="nav_menu-5" class="widget widget_nav_menu">
      <span class="gamma widget-title">Resources</span>
      <div class="menu-footer-section-4-container closed">
        <ul id="menu-footer-section-4" class="menu">
          <li id="menu-item-1792" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1792">
            <a href="/blogs/">Blogs</a>
          </li>
        </ul>
      </div>
    </div>
  </div>

CSS

.footer-widgets .footer-widget .closed {
    display: none;
}

JavaScript

$('.footer-widgets .footer-widget').each(function(e, elm) {
        var ac = $(this).find('.widget-title');
        $(ac).next('div').addClass('closed');
        $(ac).on('click', function(a) {
          $(this).toggleClass('active');
          $(this).next('div').toggleClass('closed');
          $(this).next('div').slideToggle();
          $(elm).siblings().find('.widget-title').next('div').addClass('closed');
          $(elm).siblings().find('.widget-title').next('div').slideUp();

        });
      });