JSFiddle - React, Tailwind, and code Playground

HTML

<div id="mapa">
    <input type="checkbox" name="qq1" class="chk" value="1" />
    <input type="checkbox" name="qq2" class="chk" value="2" />
    <input type="checkbox" name="qq3" class="chk" value="3" />
    <div id="submapa1-0">mapa 1-0</div>
    <div id="submapa1-1">mapa 1-1</div>
    <div id="submapa2">mapa 2-0</div>
    <div id="submapa3-0">mapa 3-0</div>
    <div id="submapa3-1">mapa 3-1</div>
    <div id="submapa3-2">mapa 3-2</div>

</div>

CSS

#mapa{
    border:3px solid red;
    margin:50px;
    padding:30px
}
div[id^="submapa"]{
    display:none
}

JavaScript

function exibeMapa(nr,marcado){        $('[id^="submapa'+nr+'"]:'+(marcado?'hidden':'visible')+':first').toggle(500,'swing', function(){
        exibeMapa(nr, marcado)
    });
}

$('.chk').click(function(){        
    exibeMapa(this.value,this.checked );
});