JQuery - Aggiungere e togliere la classe cliccando su un solo elemento

[anu]

JQuery - Aggiungere e togliere la classe cliccando su un solo elemento

Salve Ragazzi, vorrei sapere cosa c'è di sbagliato in questo piccolo script..
Mi sembra tutto corretto, ma al secondo click non cambia!

<a href="#" id="mostra_nascondi" class="mostra_nascondi">
<span id="nascondi_index">[nascondi]</span>
<span id="mostra_index" class="non_visibile">[mostra]</span>

<script>

$( ".test" ).click(function() { 
$('#mostra_index').removeClass('non_visibile');
$('#nascondi_index').addClass('non_visibile');
$('#mostra_nascondi').addClass('collapsed');
$('#mostra_nascondi').removeClass('test');            }
),

$( ".collapsed" ).click(function() {
$('#mostra_index').addClass('non_visibile');
$('#nascondi_index').removeClass('non_visibile');
$('#mostra_nascondi').addClass('test');
$('#mostra_nascondi').removeClass('collapsed');            }
)

</script>

[meis]

Ciao Anu,prova così

<script>
$(document).ready(function(){
$( ".test" ).click(function() { 
$('#mostra_index').removeClass('non_visibile');
$('#nascondi_index').addClass('non_visibile');
$('#mostra_nascondi').addClass('collapsed');
$('#mostra_nascondi').removeClass('test');            
});

$( ".collapsed" ).click(function() {
$('#mostra_index').addClass('non_visibile');
$('#nascondi_index').removeClass('non_visibile');
$('#mostra_nascondi').addClass('test');
$('#mostra_nascondi').removeClass('collapsed');            
});
});</script>

Edit: mi sono accorto che non hai dato da nessuna parte un elemento con classe "test"