show/hide alternato

[cecco-idro]

Salve a tutti, in una pagina ho 5 div che vorrei mostrare alternativamente. Servono per mostrare del testo in una lingua piuttosto che l'altra. Parto da questo codice che me il mostra o nasconde ma non riesco a fare l'alternanza

function Intro_Flags() {
    var sezione = document.getElementById(desc);
    var immagine = document.getElementById(ima);
  if (sezione.style.display == 'none') {
    sezione.style.display = '';
    immagine.src = 'common/flags/flag_'+desc+'.jpg';
  } else {
    sezione.style.display = 'none';
    immagine.src = 'common/flags/flag_'+desc+'_2.jpg';
  }
} 

praticamente la pagina si apre di default col div EN, cliccando sulla flag IT vorrei far sparire il div EN e far apparire il div IT
Ciao!

[Nick.ferro]

http://docs.jquery.com/Effects/toggle

[cecco-idro]

Grazie della risposta ma davvero devo installare una libreria intera per fare questa cosa?

[Nick.ferro]

Installare? Includere se mai..
Poi i vantaggi che ti da Jquery sono notevoli... prova a dare un occhiata...

[cecco-idro]

Ti rinrazio per il sugerimento e stai certo che è già tra i miei preferiti e quanto prima me lo guardo per benino; ma per adesso, mi piacerebbe trovare una soluzione più lite al mio problema che in sostanza si riduce a questo:

recuperare l'Id o la classe di un div tramite Javacript per poterlo rendere invisibile. Questo è il mio Javascript:

<script language="JavaScript" type="text/javascript">

function Intro_Flags() {
    var sezprev = document.getElementByClassName(prev);
    var sezione = document.getElementById(desc);
    var immagine = document.getElementById(ima);
  if (sezione.style.display == 'none') {
      sezprev.style.display == 'none'
    sezione.style.display = '';
    immagine.src = 'common/flags/flag_'+desc+'.jpg';
  } else {
    sezione.style.display = 'none';
    immagine.src = 'common/flags/flag_'+desc+'_2.jpg';
  }
}

</script>

        
        [img]common/flags/flag_it_2.jpg[/img]
        [img]common/flags/flag_en.jpg[/img]
        [img]common/flags/flag_fr_2.jpg[/img]
        [img]common/flags/flag_de_2.jpg[/img]
        [img]common/flags/flag_es_2.jpg[/img] 
        [img]common/flags/flag_jp_2.jpg[/img]
        
        <div name='desc' id='en' class='en'>en</div>
        <div name='desc' id='it' style='display:none'>it</div>
        <div name='desc' id='fr' style='display:none'>fr</div>
        <div name='desc' id='de' style='display:none'>de</div>
        <div name='desc' id='es' style='display:none'>es</div>
        <div name='desc' id='jp' style='display:none'>jp</div> 

come vedete, le flag sono dei link che lanciano il javascript passandogli dli Id degli elementi su cui agire.
Come faccio a passare l'id o la classe del div che deve rendere invisibile?

[homezappa]

Originariamente inviato da cecco-idro

Come faccio a passare l'id o la classe del div che deve rendere invisibile?

Rendi invisibili tutti gli altri?

Brutto codice, ma dovrebbe funzionare:

<script language="JavaScript" type="text/javascript">

function Intro_Flags(quale) {
    document.getElementById('it').style.display = (quale == 'it') ? '' : none;
    document.getElementById('en').style.display = (quale == 'en') ? '' : none;
    document.getElementById('fr').style.display = (quale == 'fr') ? '' : none;
    document.getElementById('de').style.display = (quale == 'de') ? '' : none;
    document.getElementById('es').style.display = (quale == 'es') ? '' : none;
    document.getElementById('jp').style.display = (quale == 'jp') ? '' : none;
    document.getElementById('ima_it').src = (quale == 'it') ? 'common/flags/flag_it.jpg' : 'common/flags/flag_it_2.jpg';
    document.getElementById('ima_en').src = (quale == 'en') ? 'common/flags/flag_en.jpg' : 'common/flags/flag_en_2.jpg';
    document.getElementById('ima_fr').src = (quale == 'fr') ? 'common/flags/flag_fr.jpg' : 'common/flags/flag_fr_2.jpg';
    document.getElementById('ima_de').src = (quale == 'de') ? 'common/flags/flag_de.jpg' : 'common/flags/flag_de_2.jpg';
    document.getElementById('ima_es').src = (quale == 'es') ? 'common/flags/flag_es.jpg' : 'common/flags/flag_es_2.jpg';
    document.getElementById('ima_jp').src = (quale == 'jp') ? 'common/flags/flag_jp.jpg' : 'common/flags/flag_jp_2.jpg';
}

</script>

        
        [img]common/flags/flag_it_2.jpg[/img]
        [img]common/flags/flag_en.jpg[/img]
        [img]common/flags/flag_fr_2.jpg[/img]
        [img]common/flags/flag_de_2.jpg[/img]
        [img]common/flags/flag_es_2.jpg[/img]
        [img]common/flags/flag_jp_2.jpg[/img]
        
        <div name='desc' id='en' class='en'>en</div>
        <div name='desc' id='it' style='display:none'>it</div>
        <div name='desc' id='fr' style='display:none'>fr</div>
        <div name='desc' id='de' style='display:none'>de</div>
        <div name='desc' id='es' style='display:none'>es</div>
        <div name='desc' id='jp' style='display:none'>jp</div>

HTH
Zappa