Problema con toggle jquery

Simone86sp

Nuovo Utente
5 Dic 2012
4
0
0
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:


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

// questo testo serve per i link Mostra/Chiudi
var showText='<img src="images/frecc.png" />';
var hideText='<img src="images/frecc-up.png" />';

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

$('.toggle').prev().append(' <a href="#" class="toggleLink">'+showText+'</a>');

// 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:

Codice:
<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"><p>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"><p>Testo del div nascosto</p></div>
 
Ciao,
questa funzione
Codice:
// mostra tutti gli elementi con la class 'toggle'
$('.toggle').hide();
in realtà nasconde tutti gli elementi con la class 'toggle'

dovrebbe bastarti ripeterla anche nel metodo click
Codice:
                // cattura il click del link
                $('a.toggleLink').click(function() {
                    // nascondo tutti gli elementi con la class 'toggle'
                    $('.toggle').hide();
in pratica prima li chiudi di nuovo tutti e poi apri solo quello che ti serve
ti sposto in jquery
 

Discussioni simili