JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<div class="footer-sidebar" id="footer-widget-area-6">
  <div class="footer-area">
    <h2 class="footer_sidebar_6_title widget-title footer-widget-title">Social Menu</h2>
    <div class="social-menu-widget">
      <ul class="social-menu">
        <li class="facebook social-menu-item"><i class="fa fa-facebook-square" aria-hidden="true"></i>
          <a href="http://facebook.com/example">Like Us On Facebook</a></li>
        <li class="twitter social-menu-item"><i class="fa fa-twitter-square" aria-hidden="true"></i><a href="http://twitter.com/example">Follow Us On Twitter</a></li>
        <li class="linkedin social-menu-item"><i class="fa fa-linkedin-square" aria-hidden="true"></i><a href="http://linkedin.com/example">Connect On LinkedIn</a></li>
        <li class="youtube social-menu-item"><i class="fa fa-youtube-square" aria-hidden="true"></i><a href="http://youtube.com/example">Follow Us On Youtube</a></li>
        <li class="googleplus social-menu-item">
          <i class="fa fa-google-plus-square" aria-hidden="true"></i><a href="http://plus.google.com/example">Follow Us On Google+</a></li>
      </ul>
    </div>
  </div>
</div>

JavaScript

jQuery(document).ready(function() {
 
  jQuery(window).on("resize", function() {
      if (jQuery(window).width() < 540) {
          jQuery('.footer-area').accordion({
            active: false, collapsible:true, active:true
          });
      } else {
      // alert("hello");
        jQuery('.footer-area').accordion( "destroy" );
        jQuery('.footer-area').accordion('option', 'active', 0);
      }
   });

});