How do I make these rules work in Checkbox?
When Selected "outsourcing" Shows "divOutsourcing", When Selects "Audit" Shows "divAuditoriaOptions", When Selects "Consulting" Shows "divConsultingOptions"
Remembering that the same options have to disappear, as the Selection is removed.
HTML
<div class="form-group" style="margin: 0 auto;" id="divAreaServico" >
<label for="segmento" class="control-label col-md-1">Segmento:</label>
<div class="col-md-8">
<div class="checkbox" id="segmento">
<label><input type="checkbox" name="outsourcing" value="outsourcing">Outsourcing</label>
<label><input type="checkbox" name="auditoria" value="auditoria">Auditoria</label>
<label><input type="checkbox" name="consultoria" value="consultoria">Consultoria</label>
</div>
</div>
</div>
<div class="form-group" style="margin: 0 auto;" id="divOutsourcing" >
<label for="out" class="control-label col-md-1">Outsourcing:</label>
<div class="col-md-8">
<div class="checkbox" id="outsourcing">
<label><input type="checkbox" name="contabil" value="contabil">Contábil</label>
<label><input type="checkbox" name="financeira" value="financeira">Financeira</label>
<label><input type="checkbox" name="fiscal" value="fiscal">Fiscal</label>
<label><input type="checkbox" name="folhaPagamento" value="folhaPagamento">Folha de Pagamento</label>
</div>
</div>
</div>
<div class="form-group" style="margin: 0 auto;" id="divConsultoriaOpcoes" >
<div class="col-md-8">
<label for="consultoriaOpcoes" class="control-label vForm"> Consultoria:</label>
<input type="text" class="form-control" name="consultoriaOpcoes" id="consultoriaOpcoes" required />
</div>
</div>
<div class="form-group" style="margin: 0 auto;" id="divAuditoriaOpcoes" >
<div class="col-md-8">
<label for="auditoriaOpcoes" class="control-label vForm"> Auditoria:</label>
<input type="text" class="form-control" name="auditoriaOpcoes" id="auditoriaOpcoes" required />
</div>
</div>