• P
    User Attivo •

    Div Espandibile - Tipo Collapsibile

    Ciao a tutti!

    Qualcuno è in grado di fornirmi un esempio concreto e soprattutto semplice per la realizzazione di un div espandibile?

    Qualcosa del tipo che inzialmente il contenuto del div è nascosto, ma cliccandovi si espande e ricliccandovi si richiude...

    Il tutto, visto che siamo su un forum di SEO, dovrebbe essere fatto evitando che Google lo interpreti come tentativo di contenuto nascosto..

    Inoltre, il contenuto del div dovrebbe essere visibile dallo spider, che deve quindi indicizzarlo per intero.
    So che molti utilizzano questa tenica senza nessun problem, in pagine in cui il cliente non vuole intaccare la grafica, ma il contenuto è necessario per il SEO.

    Ho trovato qualcosa in JS, ma mi sembrano cose pesantissime per una funzione che sicuramente qualcuno più ferrato di me può fare in 5 righe 🙂

    Grazie!

    0
  • B
    User •

    Da foglio di stile:

    div.hideContent{display:none;}
div.showContent{display:block;}
```Da Javascript (a fondo pagina, prima della chiusura del body)

[php]function switchVisBox(box)
{
var obj = document.getElementById(box);
obj.className = (obj.className == 'hideContent')? 'showContent' : 'hideContent';
}[/php]

Da HTML
[html]<a href="javascript:switchVisBox('hiddenContent');">Mostra/Nascondi Contenuto</a>
<div id="hiddenContent" class="hideContent">Hello World!</div>[/html]

Gli stili da css definiscono lo stato visibile o invisibile del div nella pagina, il contenuto di esso rimane insito nel markup per cui perfettamente in vista per bot di motori di ricerca (almeno, non ho mai avuto personalmente problemi con tal metodo)

La funzione javascript ha l'unico scopo di sostituire il class del div, agendo on the fly, tramite click sul link costruito ad hoc che, come è facile intuire, individua quel div preciso mediante il parametro che passa alla funzione javascript, il quale corrisponde all'attributo id del div.

Spero possa esserti stato d'aiuto :)
    0
  • P
    User Attivo •

    Grazie!

    Funziona! Ora vediamo quando indicizza.. 🙂

    Un ultima cosa, se posso...

    Per una questione grafica, l'altezza del div che contiene a sua volta il div nascondibile è settata ad auto, e quindi nel momento in cui il div è chiuso tutto va bene..
    Quando apro il div pero', nel caso il cotenuto nascosto sia molto, finisco fuori dallo spazio disponibile..

    Esiste un modo per cambiare, in base alla dimensione del div nascosto, la dimensione del div che lo contiene e quindi espandere il tutto?

    Grazie!!

    0
  • B
    User •

    @Porretz said:

    Per una questione grafica, l'altezza del div che contiene a sua volta il div nascondibile è settata ad auto, e quindi nel momento in cui il div è chiuso tutto va bene..
    Quando apro il div pero', nel caso il cotenuto nascosto sia molto, finisco fuori dallo spazio disponibile..

    Se finisci fuori dallo spazio disponibile allora l'altezza non è settata ad auto poiché, se così fosse, il div principale che ti contiene questo espansibile si estenderebbe a seconda dell'altezza di quest'ultimo una volta comparso.

    Controlla bene con firebug o simili, forse c'è uno stile da qualche parte che ti fissa l'altezza del contenitore superiore 😉

    0
Effettua l'accesso per rispondere