Buonasera a tutti,
premetto che sono una principiante.
Ho creato e posizionato 4 div che appaiono cliccando su relative eticchette a lato.
I quattro div si sovrappongono, ma non ovviamente nel layout perché la visibilità di uno nasconde l'altro.
Vi è un quinto div (posizionato come i precedenti) che dovrebbe scomparire quando uno degli altri quattro diventa visibile. Il problema è proprio qui.
Non riesco a fare in modo che il quinto box diventi invisibile.
Spero di non essere stata confusionaria, è più semplice leggere il codice che comprenderlo dalle mie spiegazioni

Posto il codice jquery, l'html e il css.
La parte che mi dà problemi è commentata.
Ringrazio anticipatamente per eventuali risposte

codice:
jQuery(document).ready(function($) {
$('.etichetta1').click(function(e){
$('.famiglia').toggle();
e.stopPropagation();
});
});



jQuery(document).ready(function($) {
$('html, .etichetta2, .etichetta3, .etichetta4').click(function() {
$('.famiglia').hide();
});
});

jQuery(document).ready(function($) {
$('html, .etichetta1, .etichetta3, .etichetta4').click(function() {
$('.commerciale').hide();
});
});


jQuery(document).ready(function($) {
$('html, .etichetta1, .etichetta2, .etichetta4').click(function() {
$('.fallimentare').hide();
});
});


jQuery(document).ready(function($) {
$('html, .etichetta1, .etichetta2, .etichetta3').click(function() {
$('.lavoro').hide();
});
});

jQuery(document).ready(function($) {
$('.etichetta2').click(function(e){
$('.commerciale').toggle();
e.stopPropagation();
});
});

jQuery(document).ready(function($) {
$('.etichetta3').click(function(e){
$('.fallimentare').toggle();
e.stopPropagation();
});
});

jQuery(document).ready(function($) {
$('.etichetta4').click(function(e){
$('.lavoro').toggle();
e.stopPropagation();
});
});

// parte incriminata
jQuery(document).ready(function($) {
if($('.famiglia, .lavoro, .commerciale, .fallimentare').is(':visible')){
$('.riquadro').hide();
}
else {
$('.riquadro').show();
}
});
codice:
<div class="etichetta1">
<h3>DIRITTO DI FAMIGLIA</h3> <div class="triangolo"></div>
</div>
<div class="famiglia">
<ul>
    <li>separazione e divorzio;</li>
    <li>rapporti patrimoniali ed economici tra coniugi e conviventi;</li>
    <li>filiazione e adozione;</li>
    <li>inabilitazione, interdizione, nomina di amministratore di sostegno.</li>
</ul>
</div>
<div class="etichetta2">
<h3>DIRITTO COMMERCIALE</h3><div class="triangolo"></div>
</div>
<div class="commerciale">
<ul>
    <li>contrattualistica;</li>
    <li>appalto, condominio, compravendita, locazione;</li>
    <li>obbligazioni;</li>
    <li>recupero crediti;</li>
    <li>esecuzioni mobiliari ed immobiliari.</li>

</ul>

</div>
<div class="etichetta3">
<h3>DIRITTO FALLIMENTARE</h3><div class="triangolo"></div>
</div>
<div class="fallimentare">
<ul>

        <li>Consulenze per aziende in stato di insolvenza;</li>

        <li>Procedure concorsuali;</li>

        <li>Dichiarazioni fallimentari;</li>

        <li>Concordati preventivi;</li>

        <li>Liquidazioni coatte amministrative;</li>

       <li> Programmi di risanamento del debito.</li>

</ul>
</div>
<div class="etichetta4">
<h3>DIRITTO DEL LAVORO</h3><div class="triangolo"></div>
</div>
<div class="lavoro">
<ul>
    <li>licenziamento;</li>
    <li>richiesta di indennità;</li>

    <li>disparità retributive;</li>
    <li>discriminazioni.</li>
</ul>
</div>
</div>
<div class="riquadro">
<h3>Seleziona le categorie a lato per <br> vedere i dettagli</h3>
</div>
codice:
.famiglia, .commerciale, .fallimentare, .lavoro {
    width: 430px;
    height: 200px;
    line-height: 25px;
    border: 1px solid #2b2b2b;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
    text-align: left;
    margin-left: 5%;
    margin-right: 5%;
    padding: 10px;
    display: none;
    }
    
    
    .triangolo{
    float: right;
    margin-top: -25px;
    margin-right: 10px;
     width:0; 
     height:0; 
     border-left: 5px solid grey;
     border-top: 5px solid transparent;
     border-bottom: 5px solid transparent;
}
    
    .etichetta1, .etichetta2, .etichetta3, .etichetta4 {
    margin: 20px 20px 0px 0px;
    width: 200px;
    background-color: #C6AEC7;
    cursor: pointer;
    text-align: center;
    }
    
    .famiglia {
    position: absolute;
    margin: -38px auto auto 290px;
    background-color: #D2B9D3;

    }
    
    .fallimentare {
        position: absolute;
    margin: -160px auto auto 290px;
    background-color: #E0B0FF;
    }
    .commerciale {
        position: absolute;
    margin: -99px auto auto 290px;
    background-color: #E6A9EC;

    }
    
    .lavoro {
        position: absolute;
    margin: -221px auto auto 290px;
    background-color: #EBDDE2;

    }
    
    .riquadro {
    border: 1px solid #2b2b2b;
    width: 400px;
    height: 65px;
    text-align: center;
    position: absolute;
    margin: -287px auto auto 350px;
    }