[Javascript] Creare sezione apri/chiudi in stile Wikipedia

Lenigmista

Utente Attivo
17 Set 2015
50
2
8
Non voglio fare cose sleali, come l'uso di keyword nascoste, oppure rendere il testo di colore bianco su sfondo bianco (Google penalizza solo se il testo non può essere letto dalle persone reali.). Ma fare come la versione mobile di Wikipedia, cioè creare una "linguetta" in una sezione che si apra con un click e mostri il testo. Mi interessa per non spoilerare i finali dei film, ma allo stesso tempo vorrei che venisse considerato il testo perché è pur sempre originale e dettagliato...

Nel loro caso anche il testo è indicizzato (vedi esempio), mentre se uso questo codice sottostante non lo è:
Codice:
<div class="nascosto">
<input type="button" value="Mostra" onclick="if (this.parentNode.nextSibling.childNodes[0].style.display != '') { this.parentNode.nextSibling.childNodes[0].style.display = ''; this.value = 'Nascondi'; } else { this.parentNode.nextSibling.childNodes[0].style.display = 'none'; this.value = 'Mostra'; }" />
</div><div><div class="nascosto" style="display: none;">
<p>Contenuto da nascondere</p>
</div></div>


Per caso sapete indicarmi il css utilizzato da Wikipedia per ottenere questo risultato? So fare Ispeziona elemento e vedere il codice, ma non ne vengo a capo.
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.449
338
83
Siccome io sono un po' duro di comprendomio, non ho capito a quale linguetta ti riferisci nella pagina che hai linkato.
Se me la indichi con più precisione forse posso aiutarti.
Fare un codice apri e chiudi non è molto complicato, in tutti i casi bisogna usare JS
 

Lenigmista

Utente Attivo
17 Set 2015
50
2
8
Prova a cliccare su "Filmografia parziale" o su "Voci correlate" e noterai l'effetto. Ti ho linkato la pagina della versione mobile di Wikipedia.
A me interessa che Google visualizzi ciò che scrivo e che gli utenti lo vedano facendo click su di esso; la soluzione che ho postato io non viene notata da Google nemmeno se faccio copia e incolla del testo in esso contenuto. L'aspetto estetico me lo sbrigo da solo.
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.449
338
83
Vedi se questo:
Codice:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento senza titolo</title>
<script type="text/ecmascript" language="javascript">
function Mostra(id) {
if (document.getElementById(id).style.display=="none") {
document.getElementById(id).style.display = "";
}
else{
document.getElementById(id).style.display = "none";
}
}
</script>

</head>

<body>
<div>
<a href="#" target="_self"
onclick="Mostra('d1');">
Clicca qui
</a>
</div>
<div id="d1" style="display:none;border: 1px #000000 solid;width:100px;">
Testo da Visualizzare
</div>

</body>
</html>
può andarti bene.
Ovvio che al posto del link puoi mettere immagini e variare diomensioni, aspetto, posizione, exx..
 
  • Like
Reactions: Lenigmista

Lenigmista

Utente Attivo
17 Set 2015
50
2
8
Funziona, ma perché questo nuovo codice dovrebbe indicizzare il testo in esso contenuto rispetto al mio? Entrambi non usano il display:none; ?
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.449
338
83
Uno dei possibili motivi è che hai assegnato la stessa classe al div del pulsante e al div del contenuto nascosto è sempre meglio usare un id univoco per il contenuto nascosto ed elaborarlo con getElementById(id). Un'altro ipotetico motivo è che a google non piace i div annidati. Poi sai per Google i motivi possono essere molteplici.

Come hai verificato in tempo reale quale codice Google indecizza e quale no?




.
 

Lenigmista

Utente Attivo
17 Set 2015
50
2
8
Il mio non lo indicizza di sicuro, è da mesi che uso questa tecnica... In tempo reale non so come si faccia, in verità il tuo devo ancora provarlo. Ho detto che funziona ma mi riferivo al fatto che apre/chiude il testo e non all'indicizzazione. Ti faccio sapere quando Google avrà metabolizzato la modifica all'articolo.
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.449
338
83
È filosofia del forum e buona norma condividere le soluzioni con tutti dopo aver chiesto aiuto e aver ricevuto risposte
 

Lenigmista

Utente Attivo
17 Set 2015
50
2
8
Non è cambiato nulla rispetto al codice che usavo precedentemente. Se copio parte del testo nascosto sulla barra di ricerca Google, non viene trovato. Evidentemente il display: none non fa indicizzare il testo...
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.449
338
83
Non è cambiato nulla rispetto al codice che usavo precedentemente. Se copio parte del testo nascosto sulla barra di ricerca Google, non viene trovato. Evidentemente il display: none non fa indicizzare il testo...
Non puoi fare di queste prove che non hanno nulla di verifica, perchè molto probabilmente Google non ha ancora ripassato il tuo sito e non indicizzato il testo.
Lo spider di Google non è che ripassa i siti continuamente a volte passano molti giorni prima che ripassi di li, in particolare modo se nei metatag c'è l'istruzione di ripassare ogni mese o ogni tot giorni
 
Discussioni simili
Autore Titolo Forum Risposte Data
I Creare un banner temporaneo JavaScript Javascript 0
F Creare elementi html con javascript Javascript 3
A Creare con Javascript un percorso all'interno di uno spazio Javascript 0
S [Javascript] [HTML] creare stringhe di riferimento da riutilizzare Javascript 5
Monz94 [Javascript] [HTML] Creare Checkbox o Radio con Immagini Javascript 0
D [Javascript] Come creare un equalizzatore HTML collegato a files audio Javascript 1
S [Javascript] Creare mappa per ogni utente Javascript 5
S Consigli per script javascript per creare videogiochi Javascript 2
P Creare javascript onmouseout per menu Javascript 9
C File html con procedure javascript per creare effetto libro da sfogliare Javascript 9
C Javascript completo di html per creare una tabella dove compare il saluto in base all'ora. Javascript 2
L creare una libreria javascript Javascript 3
amphioxus creare un quiz con Javascript Javascript 0
P Creare pagina web che supporta javascript Javascript 2
A Problema: creare nuove "option" di una select-list con javascript Javascript 1
B Creare una newsletter (in Javascript)?? Javascript 6
S Impossibile scorrere un oggetto in JavaScript Javascript 0
N Passare array da php a javascript PHP 5
L Quiz javascript funzionante da migliorare Javascript 0
P errore 404 con javascript Javascript 2
D aiuto funzioni javascript Javascript 1
M Upload immagine con javascript problemi con FormData() Javascript 1
L countdown multiplo javascript Javascript 1
S Problemi Javascript + Aruba Javascript 2
M Inviare un file su un server remoto con JavaScript Javascript 0
T a href="javascript:;" Javascript 1
A pulsante di update campo mysql con javascript Javascript 2
8 Javascript - PDF Form Javascript 0
B javascript per problemi con pdf e Safari Javascript 0
N informazione javascript Programmazione 0
I Eecuzione di javascript in ciclo foreach php. PHP 7
P javascript:document.forms Javascript 7
S Consiglio esercizio Javascript Javascript 2
MarcoGrazia Aggiungere o rimuovere classi in javascript Javascript 1
P Passaggio id php a javascript PHP 6
R Confrontare il dominio di una mail con una stringa contenente un dominio personalizzato, tutto ciò in php o javascript PHP 0
E lettura da un Database con Javascript jQuery 2
V TRIS in javascript Javascript 1
IClaude Funzione Javascript Javascript 8
Alex_70 Javascript date color Javascript 3
F Convertire JavaScript per la compatibilità nei browser obsoleti Javascript 0
I Passare dei parametri in javascript PHP 0
Shyson Meglio Javascript o HTML? Javascript 4
G Problema verifica palindromo e verifica pari e dispari javascript Javascript 0
M Chiamare pagina php da javascript Javascript 8
M Errore JavaScript per php [objeto HTMLParagraphElement] PHP 0
D Javascript per il download dei dati Javascript 0
grgfede Problema javascript con aruba Javascript 1
R Cerco supporto in programmazione javascript Offerte e Richieste di Lavoro e/o Collaborazione 0
webmachine [PHP] [JAVASCRIPT] Form strano in HTML PHP PHP 1

Discussioni simili