JSFiddle - React, Tailwind, and code Playground

HTML

<div class="footer-accordion">
  <div class="footer-column">
    <p>
      Toggle
      <span class="large-up--hide accordion-closed">Plus Icon</span>
      <span class="large-up--hide accordion-open">Minus Icon</span>
    </p>

    <ul class="menu">
      <li class="menu-item">
        <a href="#">Link</a>
      </li>
      <li class="menu-item">
        <a href="#">Link</a>
      </li>
      <li class="menu-item">
        <a href="#">Link</a>
      </li>
    </ul>  
  </div>
  <div class="footer-column">
    <p>
      Toggle
      <span class="large-up--hide accordion-closed">Plus Icon</span>
      <span class="large-up--hide accordion-open">Minus Icon</span>
    </p>

    <ul class="menu">
      <li class="menu-item">
        <a href="#">Link</a>
      </li>
      <li class="menu-item">
        <a href="#">Link</a>
      </li>
      <li class="menu-item">
        <a href="#">Link</a>
      </li>
    </ul>  
  </div>
  <div class="footer-column">
    <p>
      Toggle
      <span class="large-up--hide accordion-closed">Plus Icon</span>
      <span class="large-up--hide accordion-open">Minus Icon</span>
    </p>

    <ul class="menu">
      <li class="menu-item">
        <a href="#">Link</a>
      </li>
      <li class="menu-item">
        <a href="#">Link</a>
      </li>
      <li class="menu-item">
        <a href="#">Link</a>
      </li>
    </ul>  
  </div>
</div>

SCSS

@media only screen and (max-width: 600px) {
  .footer-accordion {
    p {
      margin: 0;
      padding: 15px 0;
      cursor: pointer;

      span {
        display: inline-block;
        float: right;

        &.accordion-open {
          display: none;
        }
        &.accordion-closed {
          display: inline-block;
        }
      }

      &.is-active {
        span.accordion-open {
          display: block;
        }
        span.accordion-closed {
          display: none;
        }
      }
    }

    .footer-column {
      border-bottom: 1px solid #DCDCDC;
    }
    .menu {
      display: none;
      padding-bottom: 15px;
    }  
  }
}

JavaScript

function initializeAccordion() {
    var mainToggle = $('.footer-accordion > .footer-column > p');
    $('.footer-accordion > .footer-column > .menu').css('display', 'none');

    mainToggle.click(function() {
      var that = $(this);
      var secondLevel = $(this).siblings('.menu');
      var allSeconds = $('.footer-accordion > .footer-column > .menu');

      if (that.hasClass('is-active')) {
        secondLevel.slideUp();
        that.removeClass('is-active');
        mainToggle.removeClass('is-active');
        allSeconds.removeClass('is-active');
        allSeconds.slideUp();
      } else {
        mainToggle.removeClass('is-active');
        allSeconds.removeClass('is-active');
        allSeconds.slideUp();
        secondLevel.slideDown();
        that.addClass('is-active');
        secondLevel.addClass('is-active');
      }
    });
  };
  
  initializeAccordion();