click to expand, popup tendina css o js?

[socrate2003]

Ciao a tutti, sono circa 10 anni che non faccio più siti internet.
ora sto lavorando con quel poco che mi ricordo per un mio sito.
Ho bisogno di inserire un testo, che sia a scomparsa, ma vorrei usare qualcosa di nuovo, non la solita popup

ho visto questa soluzione che mi piace molto
view-source:https://trade.z.com/uk/en/trading-ac...ve-portal.html

la trovate al testo "Please read these documents before applying(Click to expand/collapse)"

sapete dirmi dove posso trovare il codice?
credo che sia un CSS...
potrei sbagliarmi

grazie in anticipo

[KillerWorm]

Ciao, in generale si parla di effetto toggle e solitamente viene creato via JavaScript (anche se è comunque possibile realizzare sistemi del genere anche in puro CSS, ma si tratta comunque di accrocchi).
Chiaramente è possibile realizzare tale effetto usando svariati sistemi, anche a seconda del contesto in cui vai a costruirlo (se ad esempio usi framework tipo Bootstrap o altre librerie JavaScript tipo jQuery).

La pagina che hai linkato utilizza un sistema jQuery. In particolare sull'evento click di tale elemento e applicato esattamente questo (rintracciabile attraverso la console web del browser):

function() {
  $(this).toggleClass('open');
  $(this).next('.toggle-content').slideToggle('slow');
}

E' chiaro che in tal caso il tutto si integra alla struttura di quel contesto, ma puoi comunque vedere qualche tutorial per realizzare tale effetto da zero con jQuery. Il primo link che ho trovato http://www.paitadesign.com/blog/jque...re_nascondere/

Se invece si utilizzasse Bootstrap, sono già integrati sistemi come Collapse con cui risolvere in maniera molto semplice.

Se invece sei un puritano CSS e ti sei puntato nel realizzare tale effetto senza uso di script, in linea di massima puoi farlo sfruttando un elemento checkbox nascosto e qualche regola che, a seconda dello stato di questo, mostra/nasconde uno specifico elemento a seguire.

Qui una guida di base http://www.html.it/articoli/mostrana...ckbox-e-css-1/

[socrate2003]

ti ringrazio molto per la risposta.
Sinceramente ti dico che al momento non sono interessato ad approfondire studi in merito, ho necessità di farmi questo sito internet, il fine è quello, però l'esperienza accumulata al tempo mi permette di lavorare per una navigazione veloce, semplice ed efficace, se in più riesco a metterci qualche accorgimento fra il funzionale e il buon gusto grafico ne sarei molto contento.
Quindi ti chiedo cosa mi consigli di utilizzare per raggiungere lo scopo con minor tempo impiegato, tieni conto che le mie conoscenze dopo il 2007 non sono più andate avanti, e anche negli ultimi anni non mi davo più ormai la necessaria informazione per tenermi aggiornato. Questo per dirti che di tutto quanto hai citato, oltre che CSS e Jscript non conosco.
La cosa ottimale per me sarebbe quella di copiare un codice sostituendo ciò che devo, come spero q

[socrate2003]

ho visto il tutorial, mi sembra proprio quello che cercavo.
grazie

[socrate2003]

...ma addirittura quello di paitadesign sembra proprio quello della pagina che ho postato,
spero di essere capace ad inserire il codice, ma credo di si, con un attimo di pazienza...

[KillerWorm]

Se hai delle bassi di JavaScript e CSS penso non sia troppo difficile applicare quella soluzione jQuery. Tieni presente che jQuery è una delle librerie JavaScript maggiormente utilizzate da una decina di anni a questa parte, e ti permette di sviluppare facilmente gli script sulle tue pagine. Questo per dire che non ti serve solo per creare quell'effetto ma potrà tornarti molto utile se dovrai implementare maggiormente il tuo progetto con aggiunta di script.

...ma addirittura quello di paitadesign sembra proprio quello della pagina che ho postato,
spero di essere capace ad inserire il codice, ma credo di si, con un attimo di pazienza...

Sì, il sistema sembrerebbe molto simile, anche se sono stati usati differenti nomi di classe per identificare gli elementi.

Se comunque hai difficoltà nell'applicare il tutto, puoi domandare sempre qui. Ad ogni modo sposto la discussione sul forum JavaScript che, a questo punto, mi pare più appropriato.

[socrate2003]

Se hai delle bassi di JavaScript e CSS penso non sia troppo difficile applicare quella soluzione jQuery. Tieni presente che jQuery è una delle librerie JavaScript maggiormente utilizzate da una decina di anni a questa parte, e ti permette di sviluppare facilmente gli script sulle tue pagine. Questo per dire che non ti serve solo per creare quell'effetto ma potrà tornarti molto utile se dovrai implementare maggiormente il tuo progetto con aggiunta di script.


Sì, il sistema sembrerebbe molto simile, anche se sono stati usati differenti nomi di classe per identificare gli elementi.

Se comunque hai difficoltà nell'applicare il tutto, puoi domandare sempre qui. Ad ogni modo sposto la discussione sul forum JavaScript che, a questo punto, mi pare più appropriato.

ok, grazie

[socrate2003]

Se hai delle bassi di JavaScript e CSS penso non sia troppo difficile applicare quella soluzione jQuery. Tieni presente che jQuery è una delle librerie JavaScript maggiormente utilizzate da una decina di anni a questa parte, e ti permette di sviluppare facilmente gli script sulle tue pagine. Questo per dire che non ti serve solo per creare quell'effetto ma potrà tornarti molto utile se dovrai implementare maggiormente il tuo progetto con aggiunta di script.


Sì, il sistema sembrerebbe molto simile, anche se sono stati usati differenti nomi di classe per identificare gli elementi.

Se comunque hai difficoltà nell'applicare il tutto, puoi domandare sempre qui. Ad ogni modo sposto la discussione sul forum JavaScript che, a questo punto, mi pare più appropriato.

Allora, la situazione è questa, sono riuscito a replicare il tutorial, in una nuova pagina, metto on line e funziona, ...quasi tutto, mi sembra che non richiami le .png dei pulsanti, risolvibile, non è quello il problema, che invece si presenta quando metto tutto nella pagina home che sto facendo e dove vorrei appunto inserire questa soluzione,
quando inserisco la stringa che richiama la jquery <script type="text/javascript" src="scripts/jquery-1.4.1.min.js"></script> vedo solo una parte della pagina, la parte finale, tutto il resto viene come nascosto, nel caricare la pagina si vede la testa e altro ma dura 1 secondo, nemmeno, perchè subito dopo scompare tutto e vedo appunto solo l'ultima parte.
Ho fatto diverse prove, nella pagina esiste già un richiamo ad una jquery, ma pur togliendo questa il problema rimane, sono prove che ho fatto per vedere se appunto ci fosse un conflitto per la coesistenza delle due jquery. Non so cosa pensare, non ne ho le conoscenze...

[cavicchiandrea]

Meglio usare una sola libreria jQuery oltre a non appesantire la pagina eviti possibili errori/conflitti, poi monitorizza la pagina dalla console del browser

[socrate2003]

Meglio usare una sola libreria jQuery oltre a non appesantire la pagina eviti possibili errori/conflitti, poi monitorizza la pagina dalla console del browser

grazie del consiglio, ma come ho già chiarito all'inizio le mie conoscenze tecniche sono "aggiornate" a 10 anni fa, quando non esisteva nemmeno, credo, la libreria jQuery, capisco che c'è qualcosa che va in conflitto, ma se per risolvere non so da dove cominciare.