Jquery- if statement: il div non diventa invisbile al verificarsi della condizione necessaria

[Adenina]

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

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();
}
});

<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>

.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;
    }

[MAeSI]

Ciao,

per come hai strutturato il codice, dovresti inserire la condizione in ogni funzione click.

$('.etichetta1').click(function(e){
$('.famiglia').toggle();
if($('.famiglia').is(':visible'))
$('.riquadro').hide();
else
$('.riquadro').show();
e.stopPropagation();
});

Dove si trova ora il controllo sulla visibilità del div riquadro viene eseguito una volta sola, al caricamento della pagina.

Però tutto il codice js si potrebbe semplificare di molto inserendo nel codice html una classe etichetta a tutte le etichette e una classe box a tutti i div che contengono i testi.

Una cosa di questo tipo:

$(document).ready(function() {
$('.etichetta').click(function(){
var item = $(this).next();
if(item.is(":visible")){
item.hide();
$('.riquadro').show();
}
else{
$('.box:visible, .riquadro').hide();
item.show();
}
});
});

[Adenina]

Ciao MAeSi,
innanzitutto ti ringrazio per la risposta
Semplificherei volentieri il codice, ma le classi diverse mi servono per posizionare, nel css, i div nello stesso punto. O vi è un modo alternativo che non ho compreso?

Edit: intanto ho provato il codice e funziona, ma a metà, nel senso che, quando compaiono i 4 div associati alle etichette il quinto box scompare, ma riappare solo se clicco su una delle etichette per far scomparire i quattro div sopracitati.
In poche parole: se clicco sul body per far scompare uno dei 4 div il quinto non riappare..

[Adenina]

Ho risolto!
Non so se la sintassi è corretta, ma almeno funziona.
Posto la soluzione per i posteri

jQuery(document).ready(function($) {
$('.etichetta1').click(function(e){
$('.famiglia').toggle();
if($('.famiglia').is(':visible')){
$('.riquadro').hide();
} else {
$('.riquadro').show();
$('html').click(function() {
$('.riquadro').show();
});
}
e.stopPropagation();
});
$('html').click(function() {
$('.riquadro').show();
});
});

Grazie ancora del supporto MAeSi

[Vindav]

direi che si può migliorare di parecchio:

$(function(){
  $('.etichetta').click(function(e){
      $('.etichetta').next().not($(this).next()).hide();
      $(this).next().toggle();
      $('.lista').is(":visible") ? $('.riquadro').hide() : $('.riquadro').show();
      e.stopPropagation();
  });
  $('html').click(function(e){
      $('.etichetta').next(":visible").hide();
      $('.riquadro').show();
  });
});

lista corrisponde a famiglia ecc.. puoi aggiungerlo come class

[Adenina]

Grazie Vindav,
io ho però una lista di class di etichette (1,2,3 e 4) poiché ho dovuto posizionarle indipendentemente l'una dall'altra.
Posso mettere a posto di '.etichetta' la relativa lista?

Edit: mi ero dimenticata di come avevo rifatto il css.

Grazie infinite a tutti!

[Vindav]

se devi differenziarle nel css puoi fare cosi
<div class="etichetta etichetta1">
<div class="etichetta etichetta2">

ecc...

la stessa cosa per le liste

<div class="lista famiglia">
ecc...

[Adenina]

Ah, non sapevo si potesse fare.
Oddio, ci sono troppe cose da imparare

Grazie ancora di tutto!

[Adenina]

Un'ultimissimissima domanda:
sto cercando di sistemare il tutto per adattarlo al responsive.
Per il mobile il meccanismo rimane lo stesso, cambia solo la visibilità del quinto div (non si deve mai vedere).
Funziona perfettamente quando ricarico la pagina, ma non funziona per nulla quando ne faccio il resize.

(Ho cambiato tutti gli $ in jQuery perché sono su Wordpress e non saprei come altro fare).

function nascondi(){
if (jQuery(window).width() > 639) {
  jQuery('.etichetta').click(function(e){
      jQuery('.etichetta').next().not(jQuery(this).next()).hide();
      jQuery(this).next().toggle();
      jQuery('.lista').is(":visible") ? jQuery('.riquadro').hide() : jQuery('.riquadro').show();
      e.stopPropagation();
  });
  jQuery('html').click(function(e){
      jQuery('.etichetta').next(":visible").hide();
      jQuery('.riquadro').show();
  });
  }
   else {
     jQuery('.riquadro').hide();
     jQuery('.etichetta').click(function(e){
      jQuery('.etichetta').next().not(jQuery(this).next()).hide();
      jQuery(this).next().toggle();
      e.stopPropagation();
      });
    jQuery('html').click(function(e){
      jQuery('.etichetta').next(":visible").hide();
  });
  }
}


jQuery(document).ready(function(){
nascondi();
});

jQuery(window).resize(function(){
nascondi();
});

Grazie in anticipo.

[Vindav]

Prova cosi:

jQuery(document).ready(function($) {
  $('.etichetta').click(function(e){
      $('.etichetta').next().not($(this).next()).hide();
      $(this).next().toggle();
      if ($(window).width() > 639) $('.lista').is(":visible") ? $('.riquadro').hide() : $('.riquadro').show();
      e.stopPropagation();
  });

  $('html').click(function(e){
      $('.etichetta').next(":visible").hide();
      if ($(window).width() > 639) $('.riquadro').show();
  });

  $(window).resize(function(){
    if ($(window).width() <= 639) $('.riquadro').hide();
    else if($('.lista').filter(":hidden").length == 4)  $('.riquadro').show();
  });
});