Nascondere un Div quando non è presente del contenuto

[Fask]

Ciao ragazzi sul mio blog utilizzo questo piccolo script che crea un piccolo div con navigazione a tab. Tutto fuziona perfettamente, ma avrei la necessità di nascondere i tab in cui non è presente del contenuto ..... come sempre chiedo aiuto a persone più competenti del sottoscritto per arrivare alla soluzione ...... ciao e grazie per eventuali risposte.

jQuery(document).ready(function() {

	jQuery(".tab_content").hide(); 
	jQuery("ul.tabs li:first").addClass("active").show(); 
	jQuery(".tab_content:first").show(); 

	
	jQuery("ul.tabs li").click(function() {

		jQuery("ul.tabs li").removeClass("active"); 
		jQuery(this).addClass("active"); 
		jQuery(".tab_content").hide(); 

		var activeTab = $(this).find("a").attr("href"); 
		jQuery(activeTab).fadeIn(); 
		return false;
	});

});

[simo_JQ]

prova a vedere il selettore Jquery empty, per selezionare tutte le tab senza contenuto ed eliminarle o nasconderle.

[Fask]

Ciao, chiedo scusa per la celerità della risposta ma ho avuto grossi problemi personali, potresti farmi un esempio .... non sono molto pratico di javascript... ti ringrazio in anticipo.

[simo_JQ]

Non avendo l'output HTML del tuo sito ti faccio un esempio generico.

<div id="tab">
   <div class="tabs">Lol</div>
   <div class="tabs">Lol</div>
   <div class="tabs">Pieno</div>
   <div class="tabs">Pieno</div>
   <div class="tabs"></div>
</div>

$(function() {
  $("#tab .tabs:empty").remove();
});

con questa funzione Jquery cercherà tutti i DIV vuoti all'interno del div ID "tab" e li eliminerà. Ricordati che anche i tag (<a> <ul>[*]

[b] ecc...) sono contati come contenuto... quindi se ci fosse una formattazione di questo tipo

<div id="tab">
   <div class="tabs"></div>
</div>

il codice non eliminerebbe il tabs contenente il tag <a>, intaffi devi usare il selettore ":empty" sull'ultimo tag contenitore. Nel caso seguente dovresti farlo con il tag <a>

In brebe:

   $(".tuaClass:empty").remove();

Se non riesci postami il codice HTML che ti faccio uno script apposta in modo da farti capire la dinamica.

Ciaoo.

[Fask]

Grazie della tua disponibilità, ecco il mio codice HTML:

<ul class="tabs">[*] SCHEDA 1 [*] SCHEDA 2 [*] SCHEDA 3 [*] SCHEDA 4 [/list]

<div class="tab_container">
<div id="tab1" class="tab_content">
 
CONTENUTO SEMPRE VISIBILE

</div>
    
<div id="tab2" class="tab_content">
   
<?php $video_code = thman_getcustomfield('youtube_1',get_the_ID()); if(!empty($video_code)) : ?><div class="video_code"><?php echo $video_code; ?></div>
<?php endif; ?>
</div>
    
<div id="tab3" class="tab_content">
    
<?php $video_code = thman_getcustomfield('youtube_2',get_the_ID()); if(!empty($video_code)) : ?><div class="video_code"><?php echo $video_code; ?></div>
<?php endif; ?>
</div>

<div id="tab4" class="tab_content">
    
QUESTO TAB E' QUELLO CHE SE NON C'è CONTENUTO NON DOVREBBE ESSERE VISIBILE    

</div>
</div>

[simo_JQ]

Allora... con quel HTML il codice JQ dovrebbe essere questo:

$(function() {
  $(".tab_content:empty").remove();
});

ricordati che empty cerca qualunque segno presente all'interno dell'elemento tab_content dunque se verrà inserito in qlk tipo di segno, tag o testo lo script non eliminerà l'elemento.

Nell'attuale versione l'elemento verrà eliminato definitivamente dal DOM, fino al ricaricamento della pagina, una variante che non lo elimini definitivamente è:

$(function() {
  $(".tab_content:empty").css("display","none");
});

che semplicemente non lo fa vedere all'utente e non ingombra spazio nel layout renderizzato dal Browser.

provalo e dimmi se va bene.

P.S.

questo tipo di scrittura:

$(function(){
});

è la versione contratta rispetto a:

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

che utilizzi tu.
Ciao.

[Fask]

Ok simo_JQ, perfetto.... funziona alla grande, ti ringrazio della tua disponibilità e del tuo tempo a presto....

[simo_JQ]

prego. E' sempre un piacere aiutare le persone gentili e disponibili come te.
Se servisse altro, io bazzico spesso nel forum. Se per caso non rispondessi alla tua Discussione su JQ non farti scrupoli a inviarmi il link via MP.

Ciao.

[Koco]

Salve a tutti

sono alle prime armi e riporto a galla queto topic perchè avrei anche io la necessità di nascondere e non far occupare spazio ai tab in cui non è presente del contenuto ma non ho capito bene come fare nel caso sia presente comunque il tag <a> ovvero avendo una formattazione di questo tipo:

<div id="regione"> {lista_topics.REGIONE} </div>

grazie per eventuali suggerimenti!

[simo_JQ]

Ciao koco, se non ho capito male a differenza dell'altro utente tu hai una struttura in ci c'è sempre anche un tag <a> contenuto nel <div>.

Ovviamente facendo una ricerca nel div jquery troverebbe Sempre del contenuto... CIO il tra <a> anche se vuoto... per ovviare al problema basta approfondire la ricerca, dicendo A jquery che il tag nel quale cercare la presenza di contenuto non è il div stesso ma il tag <a> contenuto nel div.

Per
Html

<div id='regione'><a></a></div> 

Jquery . Se vuoi rimuovere tutto il div "regione"

$(function() {
  $("#regione > a:empty").parent('#regione').remove();
}); 

Altrimenti se vuoi nascondere solo i tag <a> vuoti

$(function() {
  $("#regione > a:empty").remove();
}); 

Sono sul tablet non posso testare, dimmi se funziona