JSFiddle - React, Tailwind, and code Playground

HTML

<h1 id="box-1">Click me for More</h1>
<div class="box-1">
    <div class="items">
        <span class="item">Item 1</span>
        <span class="item">Item 2</span>
        <span class="item">Item 3</span>
        <span class="item">Item 4</span>
        <span class="item">Item 5</span>
        <span class="item">Item 6</span>
    </div>
    <span id="button">Next</span>
</div>

CSS

#box-1{
 cursor: pointer;
 padding: 15px;   
}
.box-1{
 border: 1px #ff0000 solid;
 display: none;
 height: 150px;
 overflow: hidden;
 position: relative;
 width: 300px;    
}
.items{
 height: 150px;
 left: 0;
 position: abslute;
 top: 0;
 width: 900px;   
}
.item{
 background: #ccc;
 display: block;
 float: left;
 height: 150px;
 margin-right: 10px;
 width: 90px;
}    
#button {
 bottom: 0;
 cursor: pointer;
 display: none;
 position: absolute;   
 right: 0;
}

JavaScript

var target;
var isCollapsed = true;

$('h1').click(function() {
    if(isCollapsed) {
        $('.box-1').slideDown();
    } else {
        $('.box-1').slideUp();   
    }
    isCollapsed = !isCollapsed;
});   


var id;
$(window).resize(function() {
    clearTimeout(id);
    id = setTimeout(doneResizing, 10);

});

function doneResizing(){
    // do something
    $('.box-1').slideUp();
    isCollapsed = true;
}