Ciao, vorrei realizzare un menu verticale, nel quale al click di una categoria qualsiasi, questa passi in cima e apra il suo sottomenu a tendina.
Al click di un altra, la categoria già aperta, si chiude e torna nella posizione originale, mentre l'altra si apre.
Possibile?
io ho provato con questo:

codice:
$(document).ready(function() {
 $(".content").hide();     
$(".arrow-up").hide();     
$(".heading").click(function(){                
$(this).next(".content, .heading").appendTo("#destinazione").slideToggle(500);

$(this).find(".arrow-up, .arrow-down").toggle();
 }); 
});

//html

<div id="destinazione">
	</div>
<div class="heading" onmouseover="apparizione2('arrows1')" onmouseout="nascondi2('arrows1')>
    Category 1
    <div class="arrows" id="arrows1" style="display: none">
    <div class="arrow-up">▲</div>
    <div class="arrow-down">▼</div>
    </div>
    </div>
   		<div class="content">
sub-cat 1

sub-cat 2

sub-cat 2

</div>
Purtroppo il metodo .appendTo, mi porta in primo piano solo le sotto-categorie mentre la categoria rimane sotto, tra l'altro non più richiudibile.
Sono in alto mare anche per il ritorno in posizione.
Insomma un bel pasticcio.
Avete qualche suggerimento per realizzare questa idea!