Problemino con "pannello a discesa"

[glm2006ITALY]

Salve ho voluto usare uno script postato ieri su html

Bel effetto... ma ho un problemino
bedandbreakfast-lagomaggiore.it/beta/appartamenti.html

Questa è la pagina... il primo link "dettagli" funziona.... il 2° link mi... apre il primo

Come risolvo?

[m4rko80]

Probabilmente perche' usi l id panel piu volte nella pagina... l id dev essere univoco.
Fai in modo da assegnare un id diverso tipo panel_1 panel_2 .... e modifica quindi

$(".btn-slide").click(function(){
$("#panel").slideToggle("slow"); // qui con l idi giusto!
$(this).toggleClass("active"); return false;
});

[glm2006ITALY]

ok... ma il problema è: cosa devo fare "moltiplicare" lo script ?

[m4rko80]

no, la parte js va solo modificata ma nella pagina dovresti assegnare id="panel" con un numero progressivo(non so come li generi) se no va a prendere sempre il primo id panel(quello in testa alla pagina

[glm2006ITALY]

il "panel" è inserito in un css

Quindi devo creare più "panel" id nel css e poi indicarli nella pagina?

Questo è l'html del 2° "panel"

<div id="panel2">
<div style="font-weight: bold; color: white;">accogliente
appartamento sito in ecc ecc</div>
</div>
<p class="slide"><small style="color: white;"><small>Dettagli


Mentre questo il css

/* slide */
a:focus {
outline: none;
}
#panel {
background: #75A3D1;
height: 200px;
display: none;
}

.slide {
margin: 0;
padding: 0;
border-top: solid 4px #422410;
background: url(btn-slide.jpg) no-repeat center top;
}

.btn-slide {
background: url(white-arrow.gif) no-repeat right -50px;
text-align: center;
width: 144px;
height: 31px;
padding: 10px 10px 0 0;
margin: 0 auto;
display: block;
font: bold 120%/100% Arial, Helvetica, sans-serif;
color: #fff;
text-decoration: none;
}

.active {
background-position: right 12px;
}

[glm2006ITALY]

Allora forse ho risolto
<script type="text/javascript">
$(document).ready(function(){
$(".btn-slide").click(function(){
$("#panel").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
$(".btn-slide_2").click(function(){
$("#panel_2").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
</script>

è corretto?

[m4rko80]

Ciao, be con 2 "blocchi" sicuramente va... pero' piu blocchi ci sono e piu volte devi scrivere codice.. la soluzione milgliore sarebbe avere nell html appunto panel1 panel2 e cosi via... e la funzione javascript da chiamare sempre quella passandogli l'id.
Una cosa cosi':
HTML per prova

<diV class="btn-slide" style="border:1px solid">
<div id="panel1">aaaaa</div>
</diV>
<diV class="btn-slide" style="border:1px solid">
<div id="panel2">bbbb</div>
</diV>

$(".btn-slide").click(function(){
	$(this).find("[id=^panel]").fadeIn("slow");
	$(this).css("border", '3px solid red');
});

in questo modo cliccando sul div con classe btn-slide, vai a cercare l id che inizia per panel al suo interno

[glm2006ITALY]

Sicuramente "sperimenterò" questo sistema... per le 4 "classi" di cui avevo bisogno per questa volta ho risolto "moltiplicando" il codice sia nello javascript che nel css