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

$('.js_open_footer_menu').on('click',function () {
		var width = $(window).width();

		if (width < 768) {
			$(this).next('ul').slideToggle();
			$(this).toggleClass('active');
		} else {
			$('.js_open_footer_menu').next('ul').slideDown();
		};
	});