JSFiddle - React, Tailwind, and code Playground

by ponyspy

HTML

<div class="buttons">
    <button>one</button>
    <button>two</button>
    <button>three</button>    
</div>
<br>
<div class="events">
    <div class="date one">
        <div class="event">1</div>
        <div class="event"></div>
        <div class="event"></div>
        <div class="event"></div>
    </div>
    
    <div class="date two">
        <div class="event">2</div>
    </div>
    
    <div class="date three">
        <div class="event">3</div>
        <div class="event"></div>
        <div class="event"></div>
    </div>      
</div>

CSS

.date {
    border-top: 2px solid black;
}

.event {
    height: 40px;
    background: lightgrey;
    margin-bottom: 5px;
}

JavaScript

function getDate(date) {
	$('.' + date).prev('.date').sledeup(600);
    alert('cool')
}

$('button').on('click', function() {
	var date = $(this).text();
    getDate(date);
});