Come faccio a scambiare le icone dei triangoli quando faccio div espansione/compressione con Javascript/CSS

Question

Ho un div che voglio passare tra la visualizzazione o meno quando un utente fa clic su un pezzo di testo. Ho una funzione javascript che abilita o disabilita un div. Funziona bene Quello che non so come fare è avere un triangolo che punta verso destra o verso il basso a seconda se il div è aperto.

mio HTML simile a questa:

<a onclick="toggleDiv('myDiv');">Click here to expand or close div</a> 
<div id="myDiv" style="display:none"> 
    ... 
</div> 

Come si aggiunge uno di quei triangoli e farlo indicare la strada giusta, idealmente con un solo HTML, Javascript e CSS? Il triangolo apparirà a sinistra della stringa "Clicca qui ...".

Grazie.

Answer 1

È inoltre possibile avere un'immagine sprite, che è una singola immagine che ha entrambe le frecce, evitando la necessità di prelevare due immagini. Usa CSS per cambiare la posizione dell'immagine di sfondo in modo che solo uno si mostri alla volta. Ad esempio, qui è uno stato:

#triangle { 
    background-image: url(triangle.png); 
    background-repeat: no-repeat; 
    background-position: 0 0; 
} 

poi utilizzare JavaScript per aggiungere una classe CSS o direttamente manipolare a:

background-position: 15px 0; 

o simile per spostare l'successiva triangolo in posizione.

Answer 2

La tua funzione toggleDiv() sarebbe utile vedere qui. In ogni caso dovresti probabilmente aggiungere una classe al tuo div, forse "attivo" o "aperto".

Poi nel CSS, fare qualcosa di simile:

div { 
    background: url("downarrow.png") top left no-repeat; 
} 

div.open { 
    background: url("uparrow.png") top left no-repeat; 
} 

aggiornamento

Si può anche considerare muovere le JS fuori del codice HTML del tutto, è possibile all'osservatore l'evento click sull'elemento da il tuo JS, quindi aggiungi la classe o rimuovila in base al suo stato. Forse consideri l'utilizzo di una libreria come jQuery.

Answer 3

Ci sono un certo numero di opzioni. Per prima cosa ti serviranno le due immagini, chiamiamole uptri.jpg e downtri.jpg. Quindi è possibile creare due classi CSS:

.up{ 
     background-image:url(../images/uptri.jpg); 
     background-repeat:no-repeat; 
    } 

    .down{ 
     background-image:url(../images/downtri.jpg); 
     background-repeat:no-repeat; 
    } 

Poi, con un po 'di javscript si può scambiare la classe per la classe verso il basso. Suggerirei di usare jQuery perché rende banalmente facile.

$("#myClicker").toggle(
     function(){$(this).removeClass('up'); 
        $(this).addClass('down'); 
     }, 
     function(){$(this).removeClass('down'); 
        $(this).addClass('up'); 
     }  
    ); 

Dove myClicker è l'ID del collegamento.