JSFiddle - React, Tailwind, and code Playground

by Kai

HTML

<h3>Itsy Bitsy Spider</h3>
<ul id="lyrics">
    <li class="quote">The itsy bitsy spider went up the water spout.</li>
    <li>Down came the rain, and washed the spider out.</li>
    <li>Up came the sun, and dried up all the rain,</li>
    <li>and the itsy bitsy spider went up the spout again.</li>
</ul>
<div id="comments" style="display:none">
    <p><textarea cols="40" rows="5"></textarea></p><p class="chars">255 characters remaining</p><button>Submit</button>
    <p>Loading comments...</p>
</div>

CSS

body {
    font-family: Helvetica, Verdana, serif;
    font-size: 1.1em;
}

.chars { font-size: .6em; font-color: #ccc; }
h3 {
    margin: 5px 5px 15px 5px;
    font-size: 1.3em;
    border-bottom: 1px solid #888;
}

ul#lyrics {
    border: 1px solid #888;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 3px 3px 3px #888;
    margin-bottom: 15px;
}

ul#lyrics li {
    padding: 5px;  
    cursor: pointer;
}

ul#lyrics li:nth-child(odd) {
    background-color: #d9d9d9;
}

ul#lyrics li:hover {
    color: darkred;
}

ul#lyrics li.highlight {
    background-color: lightYellow;
}

ul#lyrics li.highlight:hover {
    color: #000;
}

JavaScript

$('ul#lyrics li').bind('click', function () {
    var $this = $(this),
        $comment = $('#comments'),
        $siblings = $this.siblings('li');
    
    // Hide siblings so focus is on selected bar
    if ($siblings.is(':visible')) {
        $siblings.slideUp();
        $this.toggleClass('highlight');
        $comment.fadeIn();
        
    // Restore hidden siblings            
    } else {
        $siblings.slideDown();
        $this.toggleClass('highlight');        
        $comment.fadeOut();
    }
});

$('textarea').bind('keyup', function () {
    var $this = $(this),
        p = $('.chars'),
        num = 255 - $this.val().length;
    
    p.html(num + ' characters remaining');
    
});