Ciao sto realizzando un sito, ma ho un problema col menu accordion, vorrei che una volta cliccatoci sopra rimanesse in memoria quale tab è stato aperto, il codice del menu è questo:
**
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Accordion</title>
<script src="menu/js/jquery-1.2.1.min.js" type="text/javascript"></script>
<script>
function initMenu() {
$('#accordion ul').hide();
$('#accordion ul:first').hide();
$('#accordion li a').click(
function() {
var checkElement = $(this).next();
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
return false;
}
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#accordion ul:visible').slideUp('normal');
checkElement.slideDown('normal');
return false;
}
}
);
}
$(document).ready(function() {initMenu();});
</script>
<style>
/* First Level UL List */
#accordion {
margin:0;
padding:0;
list-style:none;
}
li {
width:189px;
}
li a {
display: block;
width: 190px;
height: 30px;
text-indent:-999em;
outline:none;
}
/* Using CSS Sprite for menu item */
li a.home {
background:url(menu/01.jpg) no-repeat 0 0;
}
li a.home:hover, .popularOver {
background:url(menu/01.jpg) no-repeat -190px 0 !important;
}
li a.info {
background:url(menu/02.jpg) no-repeat 0 0;
}
li a.info:hover, .popularOver {
background:url(menu/02.jpg) no-repeat -190px 0 !important;
}
li a.eventi {
background:url(menu/03.jpg) no-repeat 0 0;
}
li a.eventi:hover, .popularOver {
background:url(menu/03.jpg) no-repeat -190px 0 !important;
}
li a.community {
background:url(menu/06.jpg) no-repeat 0 0;
}
li a.community:hover, .popularOver {
background:url(menu/06.jpg) no-repeat -190px 0 !important;
}
li a.fazioni {
background:url(menu/07.jpg) no-repeat 0 0;
}
li a.fazioni:hover, .popularOver {
background:url(menu/07.jpg) no-repeat -190px 0 !important;
}
li a.regolamenti {
background:url(menu/08.jpg) no-repeat 0 0;
}
li a.regolamenti:hover, .popularOver {
background:url(menu/08.jpg) no-repeat -190px 0 !important;
}
li a.campagna {
background:url(menu/09.jpg) no-repeat 0 0;
}
li a.campagna:hover, .popularOver {
background:url(menu/09.jpg) no-repeat -190px 0 !important;
}
li a.iscrizione {
background:url(menu/05.jpg) no-repeat 0 0;
}
li a.iscrizione:hover, .popularOver {
background:url(menu/05.jpg) no-repeat -190px 0 !important;
}
li a.links {
background:url(menu/12.jpg) no-repeat 0 0;
}
li a.links:hover, .popularOver {
background:url(menu/12.jpg) no-repeat -190px 0 !important;
}
li a.gallery {
background:url(menu/04.jpg) no-repeat 0 0;
}
li a.gallery:hover, .popularOver {
background:url(menu/04.jpg) no-repeat -190px 0 !important;
}
li a.shop {
background:url(menu/11.jpg) no-repeat 0 0;
}
li a.shop:hover, .popularOver {
background:url(menu/11.jpg) no-repeat -190px 0 !important;
}
li a.sponsor {
background:url(menu/10.jpg) no-repeat 0 0;
}
li a.sponsor:hover, .popularOver {
background:url(menu/10.jpg) no-repeat -190px 0 !important;
}
/* Second Level UL List*/
ul {
background:url(menu/bg.png) repeat-y 0 0;
width:190px;
margin:0;
padding:0;
display:none;
}
ul li {
height:30px;
}
/* styling of submenu item */
ul li a {
width:180px;
height:28px;
margin-left:15px;
padding-top:5px;
border-bottom: 1px dotted #777;
text-indent:0;
color:#ccc;
text-decoration:none;
}
/* remove border bottom of the last item */
ul li a.last {
border-bottom: none;
}
</style>
</head>
<body>
<ul id="accordion">
<li>
<a href="index.php" class="item home" rel="home">Home</a>
</li>
<li>
<a href="#" class="item info" rel="info">Info</a>
<ul>
<li><a href="index.php/gli-eventi">Gli Eventi</a></li>
<li><a href="index.php/cose-il-larp">Cos'è il LARP?</a></li>
<li><a href="index.php/contatti">Contatti</a></li>
<li><a href="index.php/come-arrivare">Come Arrivare</a></li>
<li><a href="index.php/il-nostro-pensiero" class="last">Il nostro pensiero</a></li>
</ul>
</li>
<li><a href="#" class="item eventi" rel="eventi">Gli Eventi</a>
<ul>
<li><a href="index.php/battle-for-vilegis-2013">Battle for Vilegis 2013</a></li>
<li><a href="index.php/echoes-of-war-2013">Echoes of War 2013</a></li>
<li><a href="#" class="last">_______</a></li>
</ul>
</li>
<li>
<a href="index.php/gallery-2" class="item gallery" rel="gallery">Gallery</a>
<ul>
<li><a href="index.php/fan-art" class="last">Fan Art</a></li>
</ul>
</li>
<li>
<a href="#" class="item iscrizione" rel="iscrizione">Iscrizione</a>
<ul>
<li><a href="index.php/personaggi">Personaggi</a></li>
<li><a href="index.php/new-player">New Player</a></li>
<li><a href="index.php/tende-in-game">Tende In Game</a></li>
<li><a href="index.php/nexus">Nexus</a></li>
<li><a href="index.php/stand-commerciali">Stand Commerciali</a></li>
<li><a href="index.php/visitatori" class="last">Visitatori</a></li>
</ul>
</li>
<li>
<a href="#" class="item community" rel="community">Community</a>
<ul>
<li><a href="index.php/articoli">Articoli & Rubriche</a></li>
<li><a href="index.php/fb-official-page">FB Official Page</a></li>
<li><a href="index.php/social-network">Social Networks</a></li>
</ul>
</li>
<li>
<a href="index.php/fazioni" class="item fazioni" rel="fazioni">Fazioni</a>
<ul>
<li><a href="index.php/altea">Altea</a></li>
<li><a href="index.php/brandis">Brandis</a></li>
<li><a href="index.php/radiant">Radiant</a></li>
<li><a href="index.php/soldraconis">Soldraconis</a></li>
<li><a href="index.php/nexus" class="last">Nexus</a></li>
</ul>
</li>
<li>
<a href="#" class="item regolamenti" rel="regolamenti">Regolamenti</a>
<ul>
<li><a href="index.php/intro">Introduzione</a></li>
<li><a href="index.php/manuale-di-gioco">Manuale di Gioco</a></li>
<li><a href="index.php/manuale-accademie">Manuale delle Accademie</a>
<li><a href="index.php/guida-dei-materiali" class="last">Guida dei Materiali</a></li>
</ul>
</li>
<li>
<a href="#" class="item campagna" rel="campagna">Campagna</a>
<ul>
<li><a href="index.php/b4v-concept">B4V Concept</a></li>
<li><a href="index.php/eventi-recenti">Eventi recenti</a></li>
<li><a href="index.php/cronistoria-di-vilegis">Cronistoria di Vilegis</a></li>
<li><a href="index.php/casate">Le Casate</a></li>
<li><a href="index.php/accademie">Le Accademie</a></li>
<li><a href="index.php/pantheon">Il Pantheon</a></li>
<li><a href="index.php/storia-re">Storia di un Re</a></li>
<li><a href="index.php/background-gruppi" class="last">Background Gruppi</a></li>
</ul>
</li>
<li>
<a href="#" class="item sponsor" rel="sponsor">Sponsor</a>
<ul>
<li><a href="index.php/mytholon">Mytholon</a></li>
<li><a href="index.php/bc">BC</a></li>
<li><a href="index.php/imperat">Imperat</a></li>
<li><a href="index.php/fucina-del-drago">La Fucina del Drago</a></li>
<li><a href="index.php/parche">Le Parche</a></li>
<li><a href="index.php/leather-lab">Leather Lab</a></li>
<li><a href="index.php/narsilion">Narsilion</a></li>
<li><a href="index.php/iron-ring" class="last">The Iron Ring</a></li>
</ul>
</li>
<li>
<a href="#" class="item shop" rel="shop">B4V Shop</a>
<ul>
<li><a href="index.php/shirt">T-shirt</a></li>
<li><a href="index.php/photo-album" class="last">Photo album</a></li>
</ul>
</li>
<li>
<a href="index.php/links" class="item links" rel="links">Links</a>
</li>
</ul>
</body>
</html>**
Inoltre vorrei anche che le categorie gallery e fazioni al click aprissero una pagina nella stessa finestra del browser e il menu rimanesse aperto con le loro sottocategorie in vista.
Spero di essere riuscito a farmi capire.
Grazie in anticipo a chi sapra' aiutarmi