JSFiddle - React, Tailwind, and code Playground

popping out selected items

by bitstarr

HTML

<ul class="selectable">
    <li><label><input type="checkbox"/>Symbol 1</label></li>
    <li><label><input type="checkbox"/>Symbol 2</label></li>
    <li><label><input type="checkbox"/>Symbol 3</label></li>
    <li><label><input type="checkbox"/>Symbol 4</label></li>
    <li><label><input type="checkbox"/>Symbol 1</label></li>
    <li><label><input type="checkbox"/>Symbol 2</label></li>
    <li><label><input type="checkbox"/>Symbol 3</label></li>
    <li><label><input type="checkbox"/>Symbol 4</label></li>
    <li><label><input type="checkbox"/>Symbol 1</label></li>
    <li><label><input type="checkbox"/>Symbol 2</label></li>
    <li><label><input type="checkbox"/>Symbol 3</label></li>
    <li><label><input type="checkbox"/>Symbol 4</label></li>
    <li><label><input type="checkbox"/>Symbol 1</label></li>
    <li><label><input type="checkbox"/>Symbol 2</label></li>
    <li><label><input type="checkbox"/>Symbol 3</label></li>
    <li><label><input type="checkbox"/>Symbol 4</label></li>
</ul>
<div id="log"></div>

CSS

.selectable li label { cursor:pointer }
.selected { background:#0f0;color:#fff }
#log { font-weight:bold; margin: 10px 0 }

JavaScript

$.fn.listSelectable = function(){
    var elms = [],
        log = $('#log');
    
    return this.each(function(){
        var $this = $(this);
        
        $this.toggle(
            function() {
                var $this = $(this);
                    
                $this
                    .addClass('selected')
                    .stop(true, true)
                    .animate({ 'margin-left' : '15px' }, 200 )
                    .find('input')
                    .attr('checked', true);
            
                elms.push( $this.text() );
                log[0].innerHTML = elms;
            },
            function() {
                var $this = $(this);
                
                $this
                    .removeClass('selected')
                    .stop(true, true)
                    .animate({ 'margin-left': '0' }, 200 )
                    .find('input')
                    .attr('checked', false);
                
                var test = elms.indexOf( $this.text() );
                
                if( test != -1 ){
                    elms.splice( test, 1 );
                    log[0].innerHTML = elms;
                }
                
            }
        );
    });
};

$('ul.selectable li').listSelectable();