Problema con toggle jquery

[Simone86sp]

Ciao a tutti,
come anticipato nel titolo ho un problema con i toggle multipli jquery per la comparsa di vari div dove vengono inseriti dei suggerimenti per gli utenti.

Ho posizionato i div nascosti sotto dei campi input e ogni volta che clicco sull'immagine info di riferimento il div a comparsa entra in scena, l'unico problema è che vorrei che dei div nascosti se ne aprisse solo uno all volta(se apro un'altro div l'altro vorrei che si chiudesse in automatico) mentre ora se li apro tutti rimangono tutti visibili uscendo fuori dai limiti della pagina.

Grazie in anticipo

questo è il codice js:

<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {

// questo testo serve per i link Mostra/Chiudi
var showText='[img]images/frecc.png[/img]';
var hideText='[img]images/frecc-up.png[/img]';

// determina se il contenuto è visibile sin dall'inizio
var is_visible = false;

$('.toggle').prev().append(' '+showText+'');

// mostra tutti gli elementi con la class 'toggle'
$('.toggle').hide();

// cattura il click del link
$('a.toggleLink').click(function() {

// modifica la visibilità
is_visible = !is_visible;

// cambia le dipendenze degli elementi
$(this).html( (!is_visible) ? showText : hideText);

// toggle the display - uncomment the next line for a basic "accordion" style
//$('.toggle').hide();$('a.toggleLink').html(showText);
$(this).parent().next('.toggle').toggle('slow');

// ritorno
return false;

});
});
//]]>
</script>

metre questi sono i campi input con il pulsante che attiva il div nascosto:

<input class="input" type="text" name="tipocliente" required="tipo cliente" placeholder="tipo cliente" value="" onfocus="chngColor(this);" />
                                
<p class="info-p"></p>
<div class="toggle">

Testo del div nascosto</p></div>
                                

<input class="input" type="text" name="piva" required="* partita iva" placeholder="* partita iva" value="" />

<p class="info-p"></p>
<div class="toggle">

Testo del div nascosto</p></div>

[sgogghy]

Potresti dire a jquery di chiudere tutti i div nascosti (cioè solo uno, quello visibile) subito dopo l'evento del click
Così:

<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {

// questo testo serve per i link Mostra/Chiudi
var showText='[img]images/frecc.png[/img]';
var hideText='[img]images/frecc-up.png[/img]';

// determina se il contenuto è visibile sin dall'inizio
var is_visible = false;

$('.toggle').prev().append(' '+showText+'');

// mostra tutti gli elementi con la class 'toggle'
$('.toggle').hide();

// cattura il click del link
$('a.toggleLink').click(function() {

//CHIUSURE DEI DIV NASCOSTI
$('.toggle').hide('slow');

// modifica la visibilità
is_visible = !is_visible;

// cambia le dipendenze degli elementi
$(this).html( (!is_visible) ? showText : hideText);

// toggle the display - uncomment the next line for a basic "accordion" style
//$('.toggle').hide();$('a.toggleLink').html(showText);
$(this).parent().next('.toggle').toggle('slow');

// ritorno
return false;

});
});
</script>

[Simone86sp]

Fantastico ora l'apertura viene gestista come desideravo, però c'è un piccolo problema...se vado a chiudere il div che ho aperto senza aprirne un'altro simula la chiusura ma poi in automatico lo riapre lasciandone senpre uno aperto.

Mi spiego meglio, ho 2 div nascosti (div "a" e div "b"), apro il div "a" e successivamente apro il div "b" che si apre e in automatico chiude il div "a" e fin qui tutto bene, se ora voglio chiudere il div "b" senza voler riaprire il div "a" effettuo il click sul pulsante relativo al div "b" con l'effetto che in un primo momento mi chiude il div "b" ma subito dopo in automatico lo riapre lasciandone senpre uno aperto.

Grazie per la disponibilita

[sgogghy]

Hai ragione, errore mio a non aver considerato questo evento.
Ho paura che dovrai dichiararli con nomi diversi e quindi gestire gli eventi indipendentemente l'uno dall'altro.

[Simone86sp]

Sapresti fornirmi un esempio limitato a due div da poter usare come guida linea per sviluppare gli altri se possibile?

Grazie per la pazienza.

[sgogghy]

Io lo farei così.
Non è la soluzione migliore ma secondo me è quella più gestibile.

 <script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {

	$('a.toggleLink1').click(function() {
		$('.toggle2').hide('slow');
		$('.toggle1').toggle('slow');
		$('a.toggleLink1').html('[img]images/frecc-up.png[/img]');
		$('a.toggleLink2').html('[img]images/frecc.png[/img]');
	});
	
	$('a.toggleLink2').click(function() {
		$('.toggle1').hide('slow');
		$('.toggle2').toggle('slow');
		$('a.toggleLink2').html('[img]images/frecc-up.png[/img]');
		$('a.toggleLink1').html('[img]images/frecc.png[/img]');
	});
});
</script>

<style>
.toggle1{
display:none;
}
.toggle2{
display:none;
}
</style>
<input class="input" type="text" name="tipocliente" required="tipo cliente" placeholder="tipo cliente" value="" onfocus="chngColor(this);" />
                                
<p class="info-p">[img]images/frecc.png[/img] </p>
<div class="toggle1 toggle">

Testo del div nascosto</p></div>
                     

<input class="input" type="text" name="piva" required="* partita iva" placeholder="* partita iva" value="" />

<p class="info-p">[img]images/frecc.png[/img]</p>
<div class="toggle2 toggle">

Testo del div nascosto</p></div>

[Simone86sp]

Grazie del tuo aiuto funziona alla perfezione!!!!