JSFiddle - React, Tailwind, and code Playground

by Juan Muñoz

HTML

<div id='aceptar'> Aceptar </div>
<div style='margin-left:300px';>
    <span id='panel' class='popup'></span>
    <div>
        <input type="checkbox">
        <span>One</span>
        <div class='popup'>
            <ul>
            <li>Opcion 1</li>
            </ul>
        </div>
      </div>    
      <div>  
        <input type="checkbox">
        <span>Two</span>
        <div class='popup'>
            <ul>
            <li>Opcion 1</li>
            </ul>
        </div>
    </div>    
          <div>    
            <input type="checkbox">
            <span>Three</span>
            <div class='popup'>
                <ul>
                <li>Opcion 1</li>
                </ul>
            </div>
    </div>   
    <div>    
    <input type="checkbox">
    <span>Four</span>
        <div class='popup'>
    <ul>
    <li>Opcion 1</li>
    </ul>
</div>
     </div>   
        <div>   
    <input type="checkbox">
    <span>Five</span>
        <div class='popup'>
    <ul>
    <li>Opcion 1</li>
    </ul>
</div>
    </div>    <div>
    <input type="checkbox">
    <span>Six</span>
        <div class='popup'>
    <ul>
    <li>Opcion 1</li>
    </ul>
</div>
        </div>    
</div>

CSS

input[type=checkbox]+span{
    padding:13px;
    margin:10px;
}
.popup{
    position: relative;
    height: 20px;
    background: red;
    width: 100px;
    right: 500;
    -webkit-transition: all 500ms;
    -moz-transition: all 500ms;
    -o-transition: all 500ms;
}
#aceptar{
    height: 20px;
    background: green;
    color:white;
    width:70px;
}
.grande{
    left:100;
    color:blue;
    transform: translate(-100%,0%);
}

JavaScript

$(document).ready(function () {
    $('input[type="checkbox"]').change(function () {
        
        if (this.checked){
             $(this).next().next().addClass('grande');
        }else {
        	$(this).next().next().removeClass('grande');
		}
    });
    
    $('#aceptar').click(function (){
        var i = 0;
        var total = 0;
    	$('input[type="checkbox"]').each(function (){
            total++
            if (this.checked){
                i++
            }else {
                
            }
            if ( i >= 2 ){
            	//$(this).next().next().removeClass('grande');
                $('.popup').removeClass('grande');
                $('#panel').addClass('grande').text("Opciones:");
            }
        });
        
    });
});