JSFiddle - React, Tailwind, and code Playground

by Vampire

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="footer_column">
  <h6 class="footer_title js_open_footer_menu">Меню</h6>
  <ul class="footer_menu">
    <li><a href="#">Ссылка</a></li>
    <li><a href="#">Ссылка</a></li>
    <li><a href="#">Ссылка</a></li>
    <li><a href="#">Ссылка</a></li>
    <li><a href="#">Ссылка</a></li>
    <li><a href="#">Ссылка</a></li>
    <li><a href="#">Ссылка</a></li>
  </ul>
</div>

CSS

@media only screen and (max-width: 768px){
  .footer_title{color: red;}
.footer_column ul{display: none;}
}

JavaScript

$(function () {
	mob_footer();
});
$(window).resize(mob_footer);
	function mob_footer() {
		if (window.matchMedia('(max-width: 768px)').matches) {
			$('.js_open_footer_menu').on('click',function () {
				$(this).next('ul').slideToggle();
				$(this).toggleClass('active');
			});
		} else {
			$('.js_open_footer_menu').next('ul').slideDown();
		}
	}