JSFiddle - React, Tailwind, and code Playground

by Krzysztof Niecikowski

HTML

<div data-id='1' id="man1">Div 1
  <div class="tab-checkbox"></div>
</div>
<div data-id='2' id="man2">Div 2
  <div class="tab-checkbox"></div>
</div>
<div data-id='3' id="man3">Div 3
  <div class="tab-checkbox"></div>
</div>

<div id="test">TEST</div>

CSS

.tab-checkbox  { width:14px; height: 14px; background: green; }
.tab-checked { width:14px; height: 14px; background: red; }
#test { display:none; }

JavaScript

$(function () {

    $("[id^=man]").click(function (event) {
        event.preventDefault();
        var elem = $(this),
		    id = elem.attr('data-id'); 
        console.log(id);

       if ( $(this).find(".tab-checkbox").is( ".tab-checked" ) ) {
        $(this).find(".tab-checkbox").removeClass('tab-checked');
     		$("#test").slideUp();
				}
        
        else
        {
        $(".tab-checkbox").removeClass('tab-checked');
        $(this).find(".tab-checkbox").addClass('tab-checked');
        $("#test").slideDown("slow");        
        }
        
        
    });


});