Problemi con jquery accordion contenuti al click su kwick

**sgarza** · 23-10-2009, 11:38

Gentilissimo Semanion,
ti posto qui di seguito il codice, sperando che tu possa aiutarmi:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dynamic Image Menu Example</title>
<link rel="stylesheet" href="_common/css/main.css" type="text/css" media="all" />
<link href="jimgMenukwicks.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-easing-1.3.pack.js"></script>
<script type="text/javascript" src="js/jquery-easing-compatibility.1.2.pack.js"></script>
<script type="text/javascript" src="js/jquery.kwicks-1.5.1.pack.js"></script>
<script type="text/javascript">
$().ready(function() {
$('.jimgMenu ul').kwicks({max: 310, duration: 400, easing: 'easeOutQuad'});
$(".btn-slide").click(function(){
$("#.opere").slideToggle("slow");
$(this).toggleClass("active"); return false;

});
$(".btn-slide2").click(function(){
$("#.libri").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
</script>

<style type="text/css">

</style>
</head>
<body>

<div id="contenitore">

<h1 class="Stile1">Nicola Di Pardo</h1>
<hr />
<div class="jimgMenu">
<ul>
<li id="landscapes">
<li id="people">
<li id="nature">Nature
<li id="abstract">Abstract
<li id="urban">Urban[/list]
</div>
<hr />

<div class="opere" style= "display: none;">
<table width="800" cellpadding="1" cellspacing="1">
<tr>
<td width="800" height="120" bordercolor="#FFFFFF"><div align="center">
<table width="120" height="120" border="1" bordercolor="#FFFFFF">
<tr>
<td>[img]images/opere/miniature/ristomini1.jpg[/img]</td>
</tr>
</table>
</div></td>
<td width="800"><div align="center">
<table width="120" height="120" border="1" bordercolor="#FFFFFF">
<tr>
<td>[img]images/opere/miniature/ristomini2.jpg[/img]</td>
</tr>
</table>
</div></td>
<td width="800"><div align="center">
<table width="120" height="120" border="1">
<tr>
<td bordercolor="#FFFFFF"></td>
</tr>
</table>
</div></td>
<td width="800"><div align="center">
<table width="120" height="120" border="1" bordercolor="#FFFFFF">
<tr>
<td></td>
</tr>
</table>
</div></td>
<td width="800"><div align="center">
<table width="120" height="120" border="1" bordercolor="#FFFFFF">
<tr>
<td></td>
</tr>
</table>
</div></td>
<td width="800"><div align="center">
<table width="120" height="120" border="1" bordercolor="#FFFFFF">
<tr>
<td></td>
</tr>
</table>
</div></td>
</tr>
<tr>
<td colspan="6"></td>
</tr>
<tr>
<td height="120" bordercolor="#FFFFFF"><div align="center">
<table width="120" height="120" border="1" bordercolor="#FFFFFF">
<tr>
<td></td>
</tr>
</table>
</div></td>
<td><div align="center">
<table width="120" height="120" border="1" bordercolor="#FFFFFF">
<tr>
<td></td>
</tr>
</table>
</div></td>
<td><div align="center">
<table width="120" height="120" border="1">
<tr>
<td bordercolor="#FFFFFF"></td>
</tr>
</table>
</div></td>
<td><div align="center">
<table width="120" height="120" border="1" bordercolor="#FFFFFF">
<tr>
<td></td>
</tr>
</table>
</div></td>
<td><div align="center">
<table width="120" height="120" border="1" bordercolor="#FFFFFF">
<tr>
<td></td>
</tr>
</table>
</div></td>
<td><div align="center">
<table width="120" height="120" border="1" bordercolor="#FFFFFF">
<tr>
<td></td>
</tr>
</table>
</div></td>
</tr>
<tr>
<td colspan="6"></td>
</tr>
</table>
</div>
<div class="libri" style= "display: none;">
<table width="800" cellpadding="1" cellspacing="1">
<tr>
<td width="800" height="120" bordercolor="#FFFFFF"><div align="center">
<table width="120" height="120" border="1" bordercolor="#FFFFFF">
<tr>
<td>[img]images/opere/miniature/ristomini1.jpg[/img]</td>
</tr>
</table>
</div></td>
<td width="800"><div align="center">
<table width="120" height="120" border="1" bordercolor="#FFFFFF">
<tr>
<td>[img]images/opere/miniature/ristomini2.jpg[/img]</td>
</tr>
</table>
</div></td>
<td width="800"><div align="center">
<table width="120" height="120" border="1">
<tr>
<td bordercolor="#FFFFFF"></td>
</tr>
</table>
</div></td>
<td width="800"><div align="center">
<table width="120" height="120" border="1" bordercolor="#FFFFFF">
<tr>
<td></td>
</tr>
</table>
</div></td>
<td width="800"><div align="center">
<table width="120" height="120" border="1" bordercolor="#FFFFFF">
<tr>
<td></td>
</tr>
</table>
</div></td>
<td width="800"><div align="center">
<table width="120" height="120" border="1" bordercolor="#FFFFFF">
<tr>
<td></td>
</tr>
</table>
</div></td>
</tr>
<tr>
<td colspan="6"></td>
</tr>
<tr>
<td height="120" bordercolor="#FFFFFF"><div align="center">
<table width="120" height="120" border="1" bordercolor="#FFFFFF">
<tr>
<td></td>
</tr>
</table>
</div></td>
<td><div align="center">
<table width="120" height="120" border="1" bordercolor="#FFFFFF">
<tr>
<td></td>
</tr>
</table>
</div></td>
<td><div align="center">
<table width="120" height="120" border="1">
<tr>
<td bordercolor="#FFFFFF"></td>
</tr>
</table>
</div></td>
<td><div align="center">
<table width="120" height="120" border="1" bordercolor="#FFFFFF">
<tr>
<td></td>
</tr>
</table>
</div></td>
<td><div align="center">
<table width="120" height="120" border="1" bordercolor="#FFFFFF">
<tr>
<td></td>
</tr>
</table>
</div></td>
<td><div align="center">
<table width="120" height="120" border="1" bordercolor="#FFFFFF">
<tr>
<td></td>
</tr>
</table>
</div></td>
</tr>
<tr>
<td colspan="6"></td>
</tr>
</table>
</div>
</div>

</body>
</html>

Al momento ho aggiunto il codice solo per le prime 2 parti di menu (opere e libri). In seguito una volta trovato il funzionamento aggiungo gli altri div.

Come vedi con la funzione .kwicks riesco a creare un image menu, poi con l'effetto slide vorrei che ad ogni menu si aprisse il livello col contenuto sotto, e fino a qui tutto funziona.

Quello che non mi riesce è di far chiudere i livelli già aperti quando apro un altro livello (ad esempio dopo l'apertura del div opere, vorrei che all'apertura di un altro livello si chiudesse il livello precedentemente aperto e si aprisse quello nuovo, sempre con un effetto slide di chiusura- apertura.

Il risultato attuale l'ho inserito provvisoriamente sul sito : http://www.isoletremitihotel.it , dove è attualmente visibile.

Ti ringrazio per la tua immane pazienza e per il tuo aiuto, e spero che questo post possa aiutare altri con il mio stesso problema.
Ciao a tutti.

Luigi

Discussione: Problemi con jquery accordion contenuti al click su kwick

Strumenti discussione

Ricerca discussione

Visualizza

Visualizzazione discussione

Permessi di invio