JSFiddle - React, Tailwind, and code Playground

by Vladimir

HTML

<ul>
    <li class="visible">Item 1</li>
    <li class="visible">Item 2</li>
    <li class="visible">Item 3</li>
    <li class="hidden">Item 4</li>
    <li class="hidden">Item 5</li>
    <li class="hidden">Item 6</li>
</ul>
<a href="#">More</a>

CSS

ul {
    background: red;
    width: 450px;
    display: block;
    list-style: none;
    overflow: hidden;
    padding: 0;
    margin: 0;
    height: 30px;
    
}
li {
    display: block;
    float: left;
    text-align: center;
    padding: 0;  
    position: relative;
    outline: 1px solid #000;
    height: 30px;
    line-height: 30px;
}
.visible {
    width: 33.33%;
}
.hidden {
    width: 0;
}
.expanded .visible,
.expanded .hidden {
    width: 16.66%;
    -webkit-transition: width 500ms ease;
}

JavaScript

$('a').click(function() {
    $('ul').addClass('expanded');
});