Uno spoiler è un blocco di informazioni inizialmente nascosto agli utenti e visualizzato solo quando l'utente fa clic su un determinato pulsante. Sul mio sito, sotto forma di spoiler, ci sono le REGOLE per aggiungere commenti. Se clicchi sulla parola REGOLE, che risulta evidenziata, sotto si aprirà un blocco con le regole.

Come ho scritto sopra, mostrerò diversi metodi che sono essenzialmente simili, ma utilizzano script diversi ed eseguono animazioni diverse. Di seguito sono riportati degli esempi.

Diamo un'occhiata a ciascuno dei metodi in ordine in modo che tu possa applicarne uno sul tuo sito web. Ma prima di farlo, definiamo la libreria jquery. Se lo hai già collegato in precedenza, inizia a guardare i metodi, in caso contrario collegalo nell'intestazione o nel piè di pagina;

Ora andiamo con ordine.

Metodo n. 1

Infatti, il più semplice dei metodi, quando si clicca, appare immediatamente il blocco. Se premuto nuovamente scompare immediatamente. È semplice. Questo metodo Lo uso anch'io.

Aggiungi uno script molto semplice. Puoi aggiungerlo direttamente nel punto in cui desideri visualizzare il blocco, puoi collegarlo nell'intestazione o nel piè di pagina, oppure puoi inserirlo in un file, che potrai poi connettere al sito, di nuovo, ovunque.

$(document).ready(function())( $(".spoiler-body").hide(); $(".spoiler-title").click(function())( $(this).next( ).

Lo script funziona con un blocco a cui è assegnata la classe spoiler-body e lo mostra quando si fa clic su un pulsante, blocco o collegamento, in generale, tutto ciò a cui è assegnata la classe spoiler-title. Per visualizzare un blocco, lo script utilizza il metodo toggle.

Spoiler Mostra/nascondi il testo nascosto che appare al passaggio del mouse

Il pulsante che si aprirà sarà il testo all'interno del tag b, come ho detto, puoi utilizzare qualsiasi tag.

Bene, assegniamo stili minimi. Il parametro principale è display:none per il blocco, che verrà nascosto. Questo è un must, altrimenti non funzionerà.

Titolo-spoiler(cursore:puntatore;).corpo-spoiler(display:none;sfondo:#f1f1f1;)

Non serve altro, tutto dovrebbe funzionare. C'è un altro punto. Puoi rendere questa animazione un po' più fluida. Per fare ciò, aggiungi un valore in millisecondi tra parentesi dopo il metodo di commutazione.
Ad esempio: toggle(500) . Ora il blocco non si aprirà immediatamente, ma in mezzo secondo 0,5. Il blocco di apertura apparirà diagonalmente da in alto a sinistra a in basso a destra. Puoi vederlo nell'esempio sopra.

Metodo n. 2

Per questo metodo e per tutti gli altri verranno utilizzati gli stessi blocchi e classi, quindi non riscriverò tutto. Solo la sceneggiatura stessa sarà diversa.

Questo metodo apre senza problemi il blocco e appare dall'alto verso il basso. Per apparire, lo script utilizza il metodo slideToggle.

$(document).ready(function())( $(".spoiler-title").click(function())( $(this).parent().children(".spoiler-body").slideToggle( ); restituisce falso; ));

Qui, come nella prima opzione, puoi modificare il tempo dell'animazione. Per impostazione predefinita il suo valore è 400 millisecondi. Se vuoi accelerare o rallentare, aggiungi un valore tra parentesi.
Ad esempio: slideToggle(600) .

Metodo n. 3

Questo metodo è essenzialmente uguale al secondo, stessa animazione, ma ne ha una caratteristica interessante. Il pulsante premuto per aprire il blocco cambia. Nell'esempio che hai visto è solo testo - Mostra testo che, all'apertura del blocco, si trasforma in Nascondi testo.
Se aggiungi un po' di fantasia, puoi aggiungere un'immagine o un blocco al posto del testo, che puoi decorare con stili. In questo metodo viene utilizzata la seguente funzione.

$(document).ready(function())( $(".spoiler-body").hide(); $(".spoiler-title").click(function())( $(this).toggleClass( "aperto ").toggleClass("chiuso").next().slideToggle(); if($(this).hasClass("aperto")) ( $(this).html("Nascondi testo"); ) else ( $ (questo).html("Mostra testo");

Puoi modificare il tempo dell'animazione utilizzando lo stesso metodo del secondo metodo.

Fondamentalmente è tutto, questi sono i tre metodi principali che volevo mostrare. Quale è giusto per te spetta a te decidere. Ora puoi organizzare facilmente un blocco che appare dopo aver fatto clic su un pulsante.

Utilizzi spoiler sul tuo sito web e perché?

Questo è tutto, grazie per l'attenzione. 🙂

La maggior parte di voi, dopo aver letto il titolo di questo articolo, dirà che gestire l'evento click con i CSS è impossibile. Tuttavia, questo non è del tutto vero. E in questo articolo mostrerò come gestire l'evento clic utilizzando solo CSS.

Supponiamo di avere una determinata scheda, facendo clic sulla quale si dovrebbe aprire il contenuto di questa scheda. La stragrande maggioranza farà tutto questo in JavaScript, ma in realtà, in questo caso, l'evento clic può essere facilmente gestito tramite CSS.

Innanzitutto, il codice HTML più comune:

Contenuti 1
Scheda 1


Contenuto 2
Scheda 2

Niente di insolito, se non che il nome della scheda si trova sotto il contenuto, più avanti capirete il perché. E ora il codice CSS:

Schede (
galleggiante: sinistra; /* Posiziona tutte le tabulazioni su una riga */
margine: 10px; /* Rientra le schede l'una dall'altra */
}
.contenuto(
visualizzazione: nessuno; /* Nascondi il contenuto */
parte superiore imbottita: 20px; /* In modo che il titolo della scheda sia sotto il contenuto */
posizione: assoluta; /* Per evitare che il contenuto sposti gli elementi sulla pagina */
}
.tabs:attivo .content (
visualizzazione: blocco; /* Quando clicchiamo sulla scheda, apriamo il contenuto del contenuto */
}
.content:passa il mouse (
visualizzazione: blocco; /* Mentre il cursore è posizionato sul contenuto, non chiuderlo */
}

L'algoritmo è il seguente: quando si clicca sul nome della scheda, si attiva automaticamente lo pseudo-elemento attivo, ma poiché funzionerà solo quando si preme il tasto, non appena lo rilasciamo, il contenuto si chiuderà. Per evitare che ciò accada, aggiungiamo una condizione secondo cui se il cursore viene posizionato sul contenuto (lo pseudo-elemento hover), non verrà chiuso. E affinché il nostro cursore finisca automaticamente sul contenuto facendo clic sulla scheda, abbiamo posizionato il pulsante sotto il contenuto e abbiamo anche creato un campo in alto. Pertanto, facendo clic sul nome della scheda, facciamo clic anche sul contenuto, quindi dopo aver fatto clic possiamo tranquillamente rilasciare il pulsante del mouse e continueremo a "trattenere" il contenuto mentre passiamo il cursore.

Oggi ti parleremo di come nascondere un elemento facendo clic su di esso. Oppure fai clic per mostrarlo. Oppure al primo clic nascondi e al secondo clic mostra. In generale, penso che tu capisca di cosa sto parlando. Qualcosa di simile è stato descritto in questo articolo.

Ma oggi tutto sarà diverso. L'effetto sarà lo stesso, ma scomparirà rapidamente, istantaneamente e non in modo fluido. Per fare ciò, creiamo lo stesso markup:

< div class = "block" > < h1 class = "extremum-click" >Teiere< div class = "extremum-slide" >Questa storia parla di come una volta andai nella foresta per raccogliere funghi e trovai una teiera magica.

Ora scriviamo gli stili. Per impostazione predefinita, il blocco di testo è nascosto. Aggiungiamo alcuni effetti visivi e, cosa più importante, miglioriamo leggermente la sceneggiatura. Cliccando sul titolo lo evidenzieremo con il colore. Ecco gli stili:

.extremum-slide (bordo: 1px solido; imbottitura: 50px; display: nessuno;) .red (colore sfondo: rosso;)

Ora la sceneggiatura stessa, che darà vita a tutto questo:

$(documento) .ready (funzione () ( $(".block") .on ("clic" , ".extremum-click" , funzione () ( $(questo ) .toggleClass ("rosso" ) .siblings ( ".extremum-slide" ) .slideToggle (0 ) );

Questo è tutto: puoi goderti il ​​risultato. Non c'è niente di particolare da dire: clicchiamo sul titolo.extremum-click, viene mostrato il testo.extremum-slide e contemporaneamente viene evidenziato lo stesso titolo. La prossima volta che fai clic sul titolo, il blocco di testo scompare.

Codice di tutta la pagina:

.extremum-slide ( border:1px solido; imbottitura:50px; display:none; ) .red ( background-color:red; ) $(document).ready(function() ( $(".block").on( "click", ".extremum-click", function() ( $(this).toggleClass("red").siblings(".extremum-slide").slideToggle(0); ));

Teiere Teiere Questa storia racconta di come una volta andai nella foresta per raccogliere funghi e trovai una teiera magica.

Teiere Questa storia racconta di come una volta andai nella foresta per raccogliere funghi e trovai una teiera magica.

Su quasi tutti i siti puoi vedere i pulsanti: Maggiori dettagli, Informazioni, Apri/Nascondi informazioni e simili. Facendo clic su di essi, si apre gradualmente un blocco con le informazioni pertinenti. Come implementarlo?

Abbastanza semplice. Utilizzando JS (libreria jQuery). Colleghiamolo dal server di Google:
Ora l'esempio completo. Per non smontarlo e non confonderti, commenterò tutti i punti principali direttamente al suo interno.
$(documento).ready(funzione() (
$("A#trigger").toggle(funzione() ( // Visualizza il blocco nascosto

},
$("DIV#casella").fadeIn(); //dissolvenza-
aspetto liscio
funzione() (
// Nascondi il blocco
$("DIV#box").fadeOut(); // fadeOut: scomparsa graduale
restituire falso; // non seguire il collegamento

)); // fine dell'attivazione/disattivazione()
)); // fine del pronto()

Mostra/nascondi informazioni Contenuti del blocco nascosti Non dimentichiamolo
in questo esempio

jQuery si sta connettendo in remoto. L'esempio non funzionerà su un computer locale senza accesso a Internet.

Diamo un'occhiata al risultato dell'apertura e della scomparsa di un blocco utilizzando jQuery:

Come creare spoiler in jquery o diversi blocchi di apertura/chiusura? A causa delle numerose richieste dei lettori, sto creando una sezione separata con un esempio e file da scaricare. Se hai diversi blocchi spoiler che devono essere aperti e chiusi senza problemi utilizzando jquery, se hai bisogno di comandi per chiudere o aprire tutto, guarda l'esempio seguente:
Spoiler
$(documento).ready(funzione())(
$(".spoiler_links").click(funzione())(
});
});

$(this).parent().children("div.spoiler_body").toggle("normal");
restituire falso;

.spoiler_body (display:nessuno;)

.spoiler_links (cursore:puntatore;)
.spoiler_links (cursore:puntatore;)

Spoiler n. 1 mostra/nascondi

Testo nel primo spoiler
Testo nel primo spoiler

L'esempio è completamente assemblato. Tutto ciò di cui hai bisogno è una connessione Internet per caricare jQuery dalle librerie di Google.

Nel processo di creazione di un sito web o blog e di ulteriore riempimento di contenuti, per vari motivi, a volte diventa necessario nascondere alcune parti del testo, inserire informazioni più voluminose in un blocco nascosto per il momento, ma comunque indicato al all'utente ciò che è disponibile qualcos'altro e dargli l'opportunità di visualizzare il contenuto nascosto senza passare alla riga o alla pagina successiva.
In precedenza, per implementare una soluzione del genere veniva utilizzata una serie di Javascript, ma ora tutto ciò può essere fatto molto facilmente utilizzando proprietà sorprendenti.

Oggi guarderemo il modo più semplice creando sulle pagine del sito e nei singoli messaggi blocchi di contenuto nascosti che si aprono quando si clicca su uno specifico elemento testuale, utilizzando esclusivamente le proprietà CSS3. Un interruttore può essere una singola parola, una frase evidenziata, un'intera frase o un'icona informativa.
Tali blocchi vengono spesso utilizzati nelle pagine con un gran numero contenuto, per renderlo più strutturato e compatto, tutto il contenuto è diviso nei cosiddetti gruppi, in cui vengono presentati all'utente solo i titoli, tutto il testo è nascosto per impostazione predefinita ed è visibile cliccando su un elemento specifico (vedi Sopra).

Proviamo a fare a meno dell'acqua non necessaria, guardiamo l'intero semplice meccanismo in azione, con un chiaro esempio, e puoi anche modificare qualcosa se lo desideri:

Esempio n. 1

Come interruttori per i blocchi a discesa con informazioni aggiuntive viene utilizzato testo non evidenziato o contrassegnato, con un invito inequivocabile a cliccarci sopra, cosa che bisogna fare senza timore o dubbio per vedere)))

Come puoi vedere, tutto funziona più che perfettamente, il contenuto nascosto appare senza problemi e scompare con un leggero clic del mouse, e allo stesso tempo abbiamo utilizzato il minimo indispensabile di codice eseguibile, sia nel framework html che nella formazione degli stili CSS. Senza collegare librerie javascript aggiuntive, con l’eterna preoccupazione se siano disabilitate da parte dell’utente.
Tutto questo è possibile grazie alla pseudo-classe CSS3 :checked applicata ad elementi dell'interfaccia come i radio button (). Ciò che in realtà abbiamo fatto è stato assegnare all'attributo type il valore checkbox nel tag, così come l'identificatore id="hd-1" corrispondente all'identificatore univoco for="hd-1" dello switch del blocco corrente. Nasconderemo le caselle di controllo completamente e per sempre impostando la proprietà display: none nel class.hide;
In realtà, non c’è niente di speciale da spiegare qui; l’intero meccanismo per attivare e disattivare i blocchi nascosti è composto da tre elementi:

• Casella di controllo: un tag con il valore della casella di controllo dell'attributo type e un identificatore di collegamento specifico
• L'intestazione (testo dell'interruttore) è un tag con un valore identificativo univoco per l'attributo for (l'identificatore deve essere uguale all'identificatore del tag di input con il valore della casella di controllo dell'attributo type).
• Il blocco contenuti è un tag div, che conterrà, fino a tempi migliori, fino al clic dell'utente, vari contenuti nascosti (testo, immagini, ecc. ecc.)

Spero che dalla mia caotica spiegazione sia diventato chiaro qual è il punto. Il CSS applica nuovi stili (usando la pseudo-classe selezionata) per mostrare un blocco di contenuto che prima era nascosto solo quando l'utente fa clic su un elemento associato a una casella di controllo tramite un identificatore univoco.

Da tutto ciò consegue una nota importante:

Quando utilizzi più blocchi nascosti sulla stessa pagina, ogni pulsante di opzione deve avere un ID univoco che sarà diverso dagli ID negli altri blocchi.

Quindi, a parole abbiamo capito cosa va dove e perché, ora diamo un’occhiata al framework html dell’intera struttura:

< input class = "hide" id= "hd-1" type= "checkbox" > < label for = "hd-1" >Clicca qui per aprire!< div>Contenuti nascosti......< input class = "hide" id= "hd-2" type= "checkbox" > < label for = "hd-2" >Clicca qui per saperne di più!< div>Contenuti nascosti...

Clicca qui per aprire! Contenuti nascosti...... Clicca qui per saperne di più! Contenuti nascosti...

Successivamente passiamo direttamente alla formazione Stili CSS, senza il quale l'intera struttura non funzionerà. Il codice minimo, senza alcuna decorazione, evidenziava solo leggermente lo sfondo affinché il blocco a discesa potesse definirlo e mostrare la cornice del testo nascosto. Puoi progettare i blocchi come preferisci, aggiungere bordi, angoli arrotondati, evidenziare testo o .

1.CSS

. nascondere, . hide + label ~ div ( display: none; ) /* aspetto del testo dell'etichetta */ . nascondi + etichetta, . nascondi: selezionato + etichetta (imbottitura: 0; colore: verde; cursore: puntatore; bordo inferiore: 1px verde punteggiato;). nascondi: selezionato + etichetta + div ( display: blocco; sfondo: #efefef; - moz- box- ombra: inset 3px 3px 10px #7d8e8f; - webkit- box- ombra: inset 3px 3px 10px #7d8e8f; box- ombra: inset 3px 3px 10px #7d8e8f; imbottitura: 10px )

/* nasconde le caselle di controllo e i blocchi di contenuto */ .hide, .hide + label ~ div ( display: none; ) /* aspetto del testo dell'etichetta */ .hide + label, .hide:checked + label (imbottitura: 0; colore: verde ; cursore: puntatore; border-bottom: 1px tratteggiato verde; ) /* aspetto del testo dell'etichetta quando l'interruttore è attivo */ .hide: selezionato + label ( colore: rosso; border-bottom: 0; ) /* quando il la casella di controllo è attiva, mostra i blocchi con il contenuto */ .hide:checked + label + div ( display: block; background: #efefef; -moz-box-shadow: inset 3px 3px 10px #7d8e8f; -webkit-box-shadow: inset 3px 3px 10px #7d8e8f; riquadro-ombra: inserto 3px 3px 10px #7d8e8f imbottitura: 10px )

Questo è tutto, per un esempio ascetico, un minimo del tutto sufficiente. Ma non saremo affatto noi se non aggiungiamo almeno alcune chicche, ed è meglio dire visivamente all'utente dove fare clic.
Nel secondo esempio, ho aggiunto un semplice simbolo sotto forma di più, che indica chiaramente che qui è nascosto qualcos'altro; quando viene premuto, si trasforma immediatamente in un segno meno e ho aggiunto una piccola animazione ai blocchi nascosti con contenuto quando appaiono, e tutto questo esclusivamente con l'aiuto della magia dei CSS3.

2.CSS

/* nasconde caselle di controllo e blocchi di contenuto */ . nascondere, . hide + label ~ div ( display: none; ) /* aspetto del testo dell'etichetta */ . hide + label ( margine: 0 ; riempimento: 0 ; colore: verde; cursore: puntatore; display: inline-block; ) /* aspetto del testo dell'etichetta quando l'interruttore è attivo */ . nascondi: selezionato + etichetta ( colore: rosso; bordo inferiore: 0 ; ) /* quando la casella di controllo è attiva, mostra i blocchi con contenuto */ . nascondi: selezionato + etichetta + div ( display: blocco; sfondo: #efefef; - moz- box- ombra: inset 3px 3px 10px #7d8e8f; - webkit- box- ombra: inset 3px 3px 10px #7d8e8f; box- ombra: inset 3px 3px 10px #7d8e8f; margine- sinistro: 20px; /* una piccola animazione quando appare */ - webkit- animazione: dissolvenza in 0,5 secondi; - moz- animazione: dissolvenza in animazione: dissolvenza easy- in 0,5 s; ) /* animazione quando compaiono i blocchi nascosti */ @- moz- i fotogrammi chiave svaniscono ( da ( opacità: 0 ; ) a ( opacità: 1 ) ) @- webkit- i fotogrammi chiave svaniscono ( da ( opacità: 0 ; ) a ( opacità: 1 ) ) @ i fotogrammi chiave sbiadiscono ( da ( opacità: 0 ; ) a ( opacità: 1 ) ). nascondi + etichetta: prima ( colore di sfondo: #1e90ff; colore: #fff; contenuto: "\002 B" ; display: blocco; float: sinistra; dimensione carattere: 14px; peso carattere: grassetto; altezza: 16px; altezza linea: 16px; allineamento testo: centro; webkit- bordo-raggio: 50%; nascondi: selezionato + etichetta: prima ( contenuto: "\221 2" ; )

/* nasconde le caselle di controllo e i blocchi di contenuto */ .hide, .hide + label ~ div ( display: none; ) /* aspetto del testo dell'etichetta */ .hide + label ( margine: 0; riempimento: 0; colore: verde; cursore: puntatore; display: inline-block; ) /* aspetto del testo dell'etichetta quando l'interruttore è attivo */ .hide:checked + label ( colore: rosso; border-bottom: 0; ) /* quando la casella di controllo è attiva, visualizza blocchi con contenuto */ . hide:checked + label + div ( display: block; background: #efefef; -moz-box-shadow: inset 3px 3px 10px #7d8e8f; -webkit-box-shadow: inset 3px 3px 10px #7d8e8f ; box-shadow: inset 3px 3px 10px #7d8e8f; margin-left: 20px; /* una piccola animazione quando appare */ -webkit-animation:fade fade-in 0.5s; quando appaiono i blocchi nascosti */ @-moz-keyframes sbiadisce (da (opacità: 0; ) a (opacità: 1)) @-webkit-keyframes sfuma (da (opacità: 0; ) a (opacità: 1)) @keyframes fade ( da ( opacità: 0; ) a ( opacità: 1 ) ) .hide + label:before ( background-color: #1e90ff;

colore: #fff;

contenuto: "\002B";

visualizzazione: blocco;