div a comparsa con scomparsa automatica

**paolo94** · 21-05-2014, 15:54

ciao a tutti

sto facendo un semplice sito per la maturità, e in una pagina ho una lista di canzoni. cliccando su una qualunque canzone si apre un div contenente il testo di essa. lo script che uso è questo:

function toggleMe(a){
var e=document.getElementById(a);
if(!e)return true;
if(e.style.display=="none"){
e.style.display="block"
} else {
e.style.display="none"
}
return true;
}

e poi nell'HTML lo uso così:

<a onclick="return toggleMe('1')">TITOLO CANZONE</a>
<div class="testo" id="1" style="display:none">TESTO CANZONE</div>

funziona tutto, il problema è che vorrei che quando clicco su una nuova canzone la canzone precedentemente aperta si chiuda. ho provato a cercare un po online ma non sono riuscito a trovare niente, e non essendo molto bravo con js non riesco a cavarmela da solo.
ringrazio in anticipo chi mi aiuterà!

**cavicchiandrea** · 21-05-2014, 16:42

codice:

function toggleMe(a){
var e=document.getElementById(a);
var ele = document.getElementsByTagName("div")
for(var i=0; i<ele.length; i++){
if([I]ele.getAttribute("id") == a && [I][I][I]ele.style.display=="none"){
ele.style.display="block"
} else {
ele.style.display="none"
}
}
}

e poi nell'HTML lo uso così:

<a onclick="toggleMe('_1')">TITOLO CANZONE 1</a>
<div class="testo" id="_1" style="display:none">TESTO CANZONE 1</div>
<a onclick="toggleMe('_2')">TITOLO CANZONE 2</a>
<div class="testo" id="_2" style="display:none">TESTO CANZONE 2</div>

P.S. Alcuni browser non gradisco gli id numerici

**paolo94** · 21-05-2014, 21:30

grazie mille per la veloce risposta!
allora, ho provato il codice che mi hai scritto, solo che non funziona! nel senso che non si apro nemmeno più ora i div, ho anche cambiato i numeri in lettere ma niente lo stesso, vorrei allegarti qualcosa ma non so come fartelo vedere l'errore!
magari sono io che fatto i passaggi sbagliati, io ho sostituito il testo da te scritto con il mio semplicemente..
ti ringrazio in anticipo per un ulteriore aiuto

**cavicchiandrea** · 21-05-2014, 21:48

http://webprogetti.it/alex/senzatitolo-2.html ci saranno altri problemi nella pagina posta il link alla pagina pubblica (tuosito.xxxx/tuapagina.xxxx)

**paolo94** · 22-05-2014, 00:28

il sito che sto facendo per ora è in locale, e non so se mai lo metterò online visto che è un progetto in vista della maturità.. se ti lascio un link della cartella del mio sito? pesa 6Mb, ho tolto gli mp3 in modo da non renderlo troppo pesante.. ci può essere qualche cosa superflua ma è normale visto che è ancora in fase di costruzione e sono partito da un template

la pagina in questione è lalbum.html, mentre il file js in questione è 800expandCollapse.js
grazie per la pazienza!

https://mega.co.nz/#F!TA8zVKDT!28skNp2ke6DjGN7MC03gXA

**KillerWorm** · 22-05-2014, 01:10

@Andrea: Paolo ha ragione. c'è qualcosa che non torna nel codice che hai postato. E' possibile che l'autoformattazione del forum abbia compromesso il codice quando lo hai postato.

Ad ogni modo posto una rielaborazione con un esempio funzionante:

codice HTML:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Esempio</title>
    <meta charset="utf-8">
    <style type="text/css">
      .testo{display:none}
    </style>
    <script type="text/javascript">
      function toggleMe(id){
        var me = document.getElementById(id);
        me.style.display = me.style.display!="block"?"block":"none";
        var testi = document.getElementsByClassName("testo");
        var i = testi.length;
        while(i--) if (testi[i]!=me) testi[i].style.display = "none";
      }
    </script>
  </head>
  <body>
    <a href="javascript:void(0);" onclick="toggleMe('_1')">TITOLO CANZONE 1</a>
    <br>
    <div class="testo" id="_1">TESTO CANZONE 1</div>
    <hr>
    <a href="javascript:void(0);" onclick="toggleMe('_2')">TITOLO CANZONE 2</a>
    <br>
    <div class="testo" id="_2">TESTO CANZONE 2</div>
    <hr>
    <a href="javascript:void(0);" onclick="toggleMe('_3')">TITOLO CANZONE 3</a>
    <br>
    <div class="testo" id="_3">TESTO CANZONE 3</div>
    <hr>
  </body>
</html>

PS: sui tag <a> sarebbe opportuno inserire sempre l'attributo href (a meno che non identifichi il nome di un ancora). In tal caso si può utilizzare javascript per bloccare l'azione del link (vedi esempio).

**cavicchiandrea** · 22-05-2014, 07:33

Si è stato il forum a fare un po' di casino col codice

**paolo94** · 22-05-2014, 10:07

Originariamente inviata da KillerWorm

@Andrea: Paolo ha ragione. c'è qualcosa che non torna nel codice che hai postato. E' possibile che l'autoformattazione del forum abbia compromesso il codice quando lo hai postato.

Ad ogni modo posto una rielaborazione con un esempio funzionante:

codice HTML:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Esempio</title>
    <meta charset="utf-8">
    <style type="text/css">
      .testo{display:none}
    </style>
    <script type="text/javascript">
      function toggleMe(id){
        var me = document.getElementById(id);
        me.style.display = me.style.display!="block"?"block":"none";
        var testi = document.getElementsByClassName("testo");
        var i = testi.length;
        while(i--) if (testi[i]!=me) testi[i].style.display = "none";
      }
    </script>
  </head>
  <body>
    <a href="javascript:void(0);" onclick="toggleMe('_1')">TITOLO CANZONE 1</a>
    <br>
    <div class="testo" id="_1">TESTO CANZONE 1</div>
    <hr>
    <a href="javascript:void(0);" onclick="toggleMe('_2')">TITOLO CANZONE 2</a>
    <br>
    <div class="testo" id="_2">TESTO CANZONE 2</div>
    <hr>
    <a href="javascript:void(0);" onclick="toggleMe('_3')">TITOLO CANZONE 3</a>
    <br>
    <div class="testo" id="_3">TESTO CANZONE 3</div>
    <hr>
  </body>
</html>

PS: sui tag <a> sarebbe opportuno inserire sempre l'attributo href (a meno che non identifichi il nome di un ancora). In tal caso si può utilizzare javascript per bloccare l'azione del link (vedi esempio).

grazie mille ora funziona alla perfezione! come href ho messo lo stesso tag <a> in modo che al click la pagina mi riporti esattamente all'inizio del testo

vi linko un altro problema che vorrei risolvere, nel caso mi sapeste aiutare

http://forum.html.it/forum/showthrea...7#post25213797

Discussione: div a comparsa con scomparsa automatica

Strumenti discussione

Ricerca discussione

Visualizza

div a comparsa con scomparsa automatica

Permessi di invio