JSFiddle - React, Tailwind, and code Playground
HTML
<ol>
<li><a class="song" data-src="songs/Titanic.mp3" style="width: 187px;">Titanic</a>
</li>
<li><a class="song" data-src="songs/Titanic.mp3" style="width: 187px;">Titanic2</a>
</li>
<li><a class="song" data-src="songs/Titanic.mp3" style="width: 187px;">Titanic3</a>
</li>
<li><a class="song" data-src="songs/Titanic.mp3" style="width: 187px;">Titanic4</a>
</li>
<li><a class="song" data-src="songs/Titanic.mp3" style="width: 187px;">Titanic5</a>
</li>
<li><a class="song" data-src="songs/Titanic.mp3" style="width: 187px;">Titanic6</a>
</li>
<li><a class="song" data-src="songs/Titanic.mp3" style="width: 187px;">Titanic7</a>
</li>
<li><a class="song" data-src="songs/Titanic.mp3" style="width: 187px;">Titanic8</a>
</li>
<li><a class="song" data-src="songs/Titanic.mp3" style="width: 187px;">Titanic9</a>
</li>
<li><a class="song" data-src="songs/Titanic.mp3" style="width: 187px;">Titanic10</a>
</li>
<li><a class="song" data-src="songs/Titanic.mp3" style="width: 187px;">Titanic11</a>
</li>
</ol>
CSS
ol {
padding: 0px;
list-style: decimal-leading-zero inside;
color: #000;
font-size: 0.9em;
-moz-column-count: 5;
-webkit-column-count: 5;
column-count: 5;
}
ol li {
display: inline-block;
margin: 5px 10px;
}
ol li a {
background-color: #EEE;
display: block;
width: 200px;
height: 40px;
cursor: pointer;
text-overflow:ellipsis;
overflow: hidden;
white-space: nowrap;
margin: 0;
}
ol li:nth-child(5n) {
padding-bottom: 40px;
}
JavaScript
function togglePadding(li, status) {
var index = li.index();
var target = (index % 5 === 4) ? li : li.siblings().eq(index + 3 - (index % 5));
target.stop(true).animate({
"padding-bottom": (status === "on") ? "40px" : 0
});
}
$('a.song').each(function () {
var origwidth = $(this).width();
var origheight = $(this).height();
$(this).hover(function () {
togglePadding($(this).parent(), "off");
$(this).stop(true).animate({
width: origwidth * 2,
height: origheight * 2
})
}, function () {
$(this).stop(true).animate({
width: origwidth,
height: origheight
});
togglePadding($(this).parent(), "on");
});
$(this).clone(true).attr({
"class": "song-detail"
}).css({
"z-index": 1,
"background-color": "#CCC"
}).appendTo('ol').wrap("<li></li>");
});