Ho un problema sui selettori...

codice:
$(".content_option_dati_contenutocasella > #toggle_option_contenutocasella").click(function(){
			alert('testo');
			if($('~ #toggle_option_contenutocasella',this).attr('class')=='fa fa-caret-square-o-down'){
			   $('~ .content_list_option_dati_contenutocasella',this).show('fast');
			   $('~ #toggle_option_contenutocasella',this).attr('class','fa fa-caret-square-o-up');
			}
			else{
			   $('~ .content_list_option_dati_contenutocasella',this).hide('fast');
			   $('~ #toggle_option_contenutocasella',this).attr('class','fa fa-caret-square-o-down');
			}
		     });
Questo è il mio codice, e dovrebbe essere semplicissimo in teoria, chiedo ad un pulsante di aprire un menù nascosto.

la struttura della mia pagina è

codice:
<div .contenutototale>
   <div .barravisibile>scritta e <i #pulsante>pulsante</i></div>
   <div .contenutolistanascosta>
      <div .lista>1</div>
      <div .lista>2</div>
   </div>
</div>
nel codice javascript ho fatto una copia pari pari al mio, però per farvi capire meglio uso i div qua sopra.

per come è ora uso il selettore .contenutototale(padre) > #pulsante(figlio) ma la funzione click non si avvia...

funziona solamente se io cambio il padre con .barravisibile... a quel punto mi fa l'allert() però non esegue nulla, perchè le altre classi sono fuori dal contenitore padre... come posso risolvere? o non ho capito una mazza io?