Toggle sidebar
  • Regolamento Macrocategoria DEV
    Prima di aprire un topic nella Macrocategoria DEV, è bene leggerne il suo regolamento. Sei un'azienda o un hosting/provider? Qui sono anche contenute informazioni per collaborare con Sciax2 ed ottenere l'accredito nella nostra community!

Come creare pag FAQ

Dovresti innanzitutto creare un box che contenga le domande, e sotto ad ogni domanda ne crei un altro con proprietà display:none.
A questo punto ad ogni box che contiene la domanda dai anche un id, magari numerico (es: la domanda numero 1 avrà <div class="domanda" id="1">) e gli aggiungi anche l'attributo onclick, tipo così:
Codice:
Perfavore, Entra oppure Registrati per vedere i codici!
Infine crei una funzione in jQuery (in realtà ci sarebbero anche altri modi per creare una cosa del genere). La funzione apparirà più o meno così:
Codice:
Perfavore, Entra oppure Registrati per vedere i codici!
Tutto lo script va messo in alto alla pagina (nella parte <head></head>).
 
  • Like
Reactions: devivo
Tapatalk ha detto:
Dovresti innanzitutto creare un box che contenga le domande, e sotto ad ogni domanda ne crei un altro con proprietà display:none.
A questo punto ad ogni box che contiene la domanda dai anche un id, magari numerico (es: la domanda numero 1 avrà <div class="domanda" id="1">) e gli aggiungi anche l'attributo onclick, tipo così:
Codice:
Perfavore, Entra oppure Registrati per vedere i codici!
Infine crei una funzione in jQuery (in realtà ci sarebbero anche altri modi per creare una cosa del genere). La funzione apparirà più o meno così:
Codice:
Perfavore, Entra oppure Registrati per vedere i codici!
Tutto lo script va messo in alto alla pagina (nella parte <head></head>).
Clicca per espandere...
Innanzitutto grazie mille per la risposta!
purtroppo sono alle prime armi con html e sto andando a tentativi .. purtroppo mi servirebbe una mano più passo passo... o il codice base che poi vado ad "ampliare" ...

attendo tue
grazie ancora in anticipo
 
devivo ha detto:
Innanzitutto grazie mille per la risposta!
purtroppo sono alle prime armi con html e sto andando a tentativi .. purtroppo mi servirebbe una mano più passo passo... o il codice base che poi vado ad "ampliare" ...

attendo tue
grazie ancora in anticipo
Clicca per espandere...
Diciamo che prima di tutto devi creare 2 box in html, tipo così (il numero varia a seconda della domanda):
Codice:
Perfavore, Entra oppure Registrati per vedere i codici!

Una volta fatto ciò devi dare uno stile ai tuoi box, devi quindi creare un linguaggio CSS che decida colore, dimensioni, font e quant'altro.
Nel CSS il puntino (.) prima di una parola esprime una classe (<div class="ecc">), mentre il cancelletto (#) esprime un ID (<div id="ecc">).
Codice:
Perfavore, Entra oppure Registrati per vedere i codici!
Con questo breve codice ho detto al file di dare una larghezza ai box (width) pari alla grandezza della pagina, ho poi dato un'altezza minima (height) ad ogni box, ho impostato un colore per il testo (color) e un bordo di un pixel per i box (border), infine ho dato una spaziatura del testo (padding), che è facoltativa, non serve per forza, è una questione di estetica. In ultimo ho fatto il modo che il box della risposta non venisse visualizzato (display:none).

A questo punto manca solo il jQuery, un linguaggio che ti permette di fare animazioni, dalle più semplici alle più complesse. Quella che ti ho dato io è un po' complessa. Sappi che quando vuoi usare il jQuery devi sempre includere un file che richiama il jQuery, che puoi trovare su google o scaricarlo anche (meglio lasciarlo hostato, così occupi meno spazio nelle tue cartelle). Il codice sarà così:
Codice:
Perfavore, Entra oppure Registrati per vedere i codici!
Con una funzione del genere ho fatto in modo che al primo click sul blocco della domanda, la risposta venga visualizzata; al secondo click ho fatto in modo che venga nascosta nuovamente.

Ricapitolando tutto, il codice finale sarà più o meno così:
Codice:
Perfavore, Entra oppure Registrati per vedere i codici!

In realtà potresti creare anche un file con estensione .css ed inserirgli dentro lo stile, per poi richiamarlo dal file di base in html, così:
Codice:
Perfavore, Entra oppure Registrati per vedere i codici!
Stessa cosa puoi fare con il jQuery, creando un file .js:
Codice:
Perfavore, Entra oppure Registrati per vedere i codici!
Entrambi i codici andrebbero sempre messi nella parte <head></head>.

Quando vorrai aggiungere una nuova domanda ed una nuova risposta ti basterà copiare il seguente codice e cambiare 1 con 2, o comunque con un numero nuovo:
<div class="domanda" onclick="apriDomanda('2');">Clicca per vedere la domanda 2</div>
<div class="risposta" id="2">Questa è la risposta alla tua domanda 2!</div>
Clicca per espandere...
 
  • Like
Reactions: devivo
Tapatalk ha detto:
Diciamo che prima di tutto devi creare 2 box in html, tipo così (il numero varia a seconda della domanda):
Codice:
Perfavore, Entra oppure Registrati per vedere i codici!

Una volta fatto ciò devi dare uno stile ai tuoi box, devi quindi creare un linguaggio CSS che decida colore, dimensioni, font e quant'altro.
Nel CSS il puntino (.) prima di una parola esprime una classe (<div class="ecc">), mentre il cancelletto (#) esprime un ID (<div id="ecc">).
Codice:
Perfavore, Entra oppure Registrati per vedere i codici!
Con questo breve codice ho detto al file di dare una larghezza ai box (width) pari alla grandezza della pagina, ho poi dato un'altezza minima (height) ad ogni box, ho impostato un colore per il testo (color) e un bordo di un pixel per i box (border), infine ho dato una spaziatura del testo (padding), che è facoltativa, non serve per forza, è una questione di estetica. In ultimo ho fatto il modo che il box della risposta non venisse visualizzato (display:none).

A questo punto manca solo il jQuery, un linguaggio che ti permette di fare animazioni, dalle più semplici alle più complesse. Quella che ti ho dato io è un po' complessa. Sappi che quando vuoi usare il jQuery devi sempre includere un file che richiama il jQuery, che puoi trovare su google o scaricarlo anche (meglio lasciarlo hostato, così occupi meno spazio nelle tue cartelle). Il codice sarà così:
Codice:
Perfavore, Entra oppure Registrati per vedere i codici!
Con una funzione del genere ho fatto in modo che al primo click sul blocco della domanda, la risposta venga visualizzata; al secondo click ho fatto in modo che venga nascosta nuovamente.

Ricapitolando tutto, il codice finale sarà più o meno così:
Codice:
Perfavore, Entra oppure Registrati per vedere i codici!

In realtà potresti creare anche un file con estensione .css ed inserirgli dentro lo stile, per poi richiamarlo dal file di base in html, così:
Codice:
Perfavore, Entra oppure Registrati per vedere i codici!
Stessa cosa puoi fare con il jQuery, creando un file .js:
Codice:
Perfavore, Entra oppure Registrati per vedere i codici!
Entrambi i codici andrebbero sempre messi nella parte <head></head>.

Quando vorrai aggiungere una nuova domanda ed una nuova risposta ti basterà copiare il seguente codice e cambiare 1 con 2, o comunque con un numero nuovo:
Clicca per espandere...


Non so quanto ringraziarti! gentilissimo!
e per quanto riguarda i 4 blocchi che ha sopra "il mio profilo" "acquistare" ecc.. ?
ognuno di quei blocchi poi fa comparire una serie di Q/A
 

Allegati

  • Schermata 2018-01-29 alle 19.37.27.png
    Schermata 2018-01-29 alle 19.37.27.png
    16 KB · Visualizzazioni: 2
devivo ha detto:
Non so quanto ringraziarti! gentilissimo!
e per quanto riguarda i 4 blocchi che ha sopra "il mio profilo" "acquistare" ecc.. ?
ognuno di quei blocchi poi fa comparire una serie di Q/A
Clicca per espandere...
Io ti consiglierei di creare più pagine di Q/A, così che eviti di fare stare tutto in una sola pagina. In tal caso crei semplicemente dei link tipo così:
Codice:
Perfavore, Entra oppure Registrati per vedere i codici!
Poi ai tag <a> dai lo stile che vuoi insomma..
 
Devi accedere o registrarti per rispondere qui.
 
 
Top
Indietro