JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>text 1</li>
    <li>text 2</li>
    <li>text 3</li>
    <li>text 4</li>
    <li>text 5</li>
    <li>text 6</li>
    <li>text 7</li>
    <li>text 8</li>
</ul>
<p>How should clicking behave? <select size="1">
    <option value="i">set to inline</option>
    <option value="b">set to block</option>
    <option value="n">set to null</option>
    <option value="u">set to undefined</option>
    <option value="e">set to ''</option>
    <option value="f">set to faux value</option>
    <option value="a">removeAttr(style)</option>
    <option value="r">removeProperty</option>
    </select>
</p>
<p>With CSS rule: <input type="checkbox" id="css" /></p>
<div>&nbsp;</div>

CSS

ul {
    list-style-type: none;
}
li {
    cursor: pointer;
    background-color: wheat;
    padding: 1px 4px;
    margin: 3px;
}
li.css {
    display: inline;
}
ul, div, p {
    margin-top: 10px;
}

JavaScript

$('#css').click(function(){
    if ( this.checked ) {
        $('li').addClass('css');
    }
    else {
        $('li').removeClass('css');
    }
});

$('li').click(function(){
    var $el = $(this),
        $log = $('div'),
        $mode = $('select').val();

    switch ($mode) {
        case "i":
            $el.css('display', 'inline');
            break;
        case "b":
            $el.css('display', 'block');
            break;
        case "n":
            $el.css('display', null);
            break;
        case "u":
            $el.css('display', undefined);
            break;
        case "e":
            $el.css('display', '');
            break;
        case "f":
            $el.css('display', 'pokahontas');
            break;
        case "a":
            $el.removeAttr('style');
            break;
        case "r":
            $el.get(0).style.removeProperty('display');
            break;
    }

    $log.html([
        'css(display): ‹ '+ $el.css('display') +' ›',
        'style.display: ‹ '+ $el.get(0).style.display +' ›'
    ].join("<br/>"));
});