JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<ul>
    <li>M83</li>
    <li>Spoon</li>
    <li>CHVRCHES</li>
    <li>Dan</li>
</ul>
<ul>
    <li>Darius Rucker</li>
    <li>Taylor Swift</li>
    <li>Keith Urban</li>
    <li>Corey</li>
</ul>
<ul>
    <li>Panic at the Disco</li>
    <li>Nsync</li>
    <li>Fallout Boy</li>
    <li>Kerri</li>
</ul>
<ul>
    <li>Beatles</li>
    <li>Styx</li>
    <li>The Toilet Bowl Cleaners</li>
    <li>Jeff</li>
</ul>
<ul>
    <li>Daft Punk</li>
    <li>Icona Pop</li>
    <li>Meat Loaf</li>
    <li>Kevin</li>
</ul>
<ul>
    <li>Podcast</li>
    <li>Podcast</li>
    <li>Podcast</li>
    <li>Bill</li>
</ul>
<ul>
    <li>Kid Rock</li>
    <li>Foo Fighters</li>
    <li>Nirvana</li>
    <li>Mat</li>
</ul>

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);

body {
    max-width: 640px;
    padding: 1em;
    margin: 0 auto;
}

ul, li {
    font-size: 20px;
    font-family: 'Open Sans', Arial;
    margin: 0;
    list-style: none;
    padding: 0;
}
ul {
    clear: both;
    display: block;
    padding: 1em 0 1em;
}

li {
    margin: 0 1em 0 0;
    background: #eee;
    float: left;
}
li:last-child {
    float: right;
    font-weight: 700;
    background: transparent;
}

li ~ li {
    display: none;
}

ul:after {
    content: 'show more';
    text-decoration: underline;
    color: blue;
    font-size: .5em;
    cursor: pointer;
}

ul.no_more_hints:after {
    content: 'show answer';
}
ul.answer_shown:after {
    display: none;
}

JavaScript

$(function() {
    
    $('ul').click(function() {
        $(this).find('li:hidden').first().show();
        
        if ($(this).find('li:hidden').length == 1) {
            $(this).addClass('no_more_hints');
        } else if ($(this).find('li:hidden').length < 1) {
            $(this).addClass('answer_shown');
        }
    });
});