JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://yastatic.net/jquery/1.12.0/jquery.min.js"></script>
<div class="catalog">
    <div class="cell">
        <div class="item">
            <div class="title">title 1</div>
            <ul>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
            </ul>
        </div>
    </div>
    <div class="cell">
        <div class="item">
            <div class="title">title 2</div>
            <ul>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
            </ul>
        </div>
    </div>
    <div class="cell">
        <div class="item">
            <div class="title">title 3</div>
            <ul>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
                <li>item</li>
            </ul>
        </div>
    </div>
</div>

CSS

.cell{
  width: 33%;
  float: left;
  border: 1px solid #CCC;
  box-sizing: border-box;
  padding: 10px;
}


@media screen and (max-width: 480px) {
  
  .cell{
    width: 100%;
  }
  
  ul{
    display: none;
  }
}

JavaScript

// get default "body" size
var bodySize = $('.catalog').outerWidth();


if (bodySize <= 480) {
    $('.title').click(function () {
        // $(this).parent().addClass('opened');
        $(this).next('ul').stop().slideToggle(300);
        $(this).parent().parent().siblings().find('ul').slideUp(300);
        $(this).parent().parent().toggleClass('open');
        $(this).parent().parent().siblings().removeClass('open');
        return false;
    });
}

// if window resize
$( window ).resize(function () {
	// get current "body" size
	bodySize = $('.catalog').outerWidth();
  
  // clear style after sliding
  if (bodySize > 480){
  	$('ul').removeAttr('style');
  }
  
  if (bodySize <= 480) {
    $('.title').click(function () {
        // $(this).parent().addClass('opened');
        $(this).next('ul').stop().slideToggle(300);
        $(this).parent().parent().siblings().find('ul').slideUp(300);
        $(this).parent().parent().toggleClass('open');
        $(this).parent().parent().siblings().removeClass('open');
        return false;
    });
}
  
});