• 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

Tapatalk

Utente Esperto
28 Agosto 2013
1.264
90
53
20
Bellaria
Miglior risposta
3
#2
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:
<div class="domanda" id="1" onclick="tuaFunzione('id risposta da mostrare, in questo caso 1');">
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:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
function tuaFunzione(numero){
 var clicks = $(this).data('clicks');
  if (!clicks) {
$("#"+numero).show();
 } else {
$("#"+numero).hide();
  }
  $(this).data("clicks", !clicks);
  }
</script>
Tutto lo script va messo in alto alla pagina (nella parte <head></head>).
 
Mi Piace: devivo

devivo

Nuovo utente
30 Settembre 2012
6
0
10
30
Miglior risposta
0
#3 Autore del topic
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:
<div class="domanda" id="1" onclick="tuaFunzione('id risposta da mostrare, in questo caso 1');">
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:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
function tuaFunzione(numero){
 var clicks = $(this).data('clicks');
  if (!clicks) {
$("#"+numero).show();
 } else {
$("#"+numero).hide();
  }
  $(this).data("clicks", !clicks);
  }
</script>
Tutto lo script va messo in alto alla pagina (nella parte <head></head>).
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
 

Tapatalk

Utente Esperto
28 Agosto 2013
1.264
90
53
20
Bellaria
Miglior risposta
3
#4
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
Diciamo che prima di tutto devi creare 2 box in html, tipo così (il numero varia a seconda della domanda):
Codice:
<div class="domanda" onclick="apriDomanda('1');">Clicca per vedere la domanda 1</div>
<div class="risposta" id="1">Questa è la risposta alla tua domanda 1!</div>
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:
.domanda, .risposta{
width:100%;
min-height:30px;
border:1px solid;
color:#000;
padding:5px;
}
.risposta{
display:none;
}
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:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
function apriDomanda(numero){
 var clicks = $(this).data('clicks');
  if (!clicks) {
$("#"+numero).show();
 } else {
$("#"+numero).hide();
  }
  $(this).data("clicks", !clicks);
  }
</script>
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:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
function apriDomanda(numero){
 var clicks = $(this).data('clicks');
  if (!clicks) {
$("#"+numero).show();
 } else {
$("#"+numero).hide();
  }
  $(this).data("clicks", !clicks);
  }
</script>
<style type="text/css">
.domanda, .risposta{
width:100%;
min-height:30px;
border:1px solid;
color:#000;
padding:5px;
}
.risposta{
display:none;
}</style>
<title>Titolo della tua pagina</title>
</head>

<body>
<div class="domanda" onclick="apriDomanda('1');">Clicca per vedere la domanda 1</div>
<div class="risposta" id="1">Questa è la risposta alla tua domanda 1!</div>
</body>
</html>
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:
<link rel="stylesheet" type="text/css" href="miofile.css">
Stessa cosa puoi fare con il jQuery, creando un file .js:
Codice:
<script type="text/javascript" src="miofile.js"></script>
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>
 
Mi Piace: devivo

devivo

Nuovo utente
30 Settembre 2012
6
0
10
30
Miglior risposta
0
#5 Autore del topic
Diciamo che prima di tutto devi creare 2 box in html, tipo così (il numero varia a seconda della domanda):
Codice:
<div class="domanda" onclick="apriDomanda('1');">Clicca per vedere la domanda 1</div>
<div class="risposta" id="1">Questa è la risposta alla tua domanda 1!</div>
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:
.domanda, .risposta{
width:100%;
min-height:30px;
border:1px solid;
color:#000;
padding:5px;
}
.risposta{
display:none;
}
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:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
function apriDomanda(numero){
 var clicks = $(this).data('clicks');
  if (!clicks) {
$("#"+numero).show();
 } else {
$("#"+numero).hide();
  }
  $(this).data("clicks", !clicks);
  }
</script>
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:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
function apriDomanda(numero){
 var clicks = $(this).data('clicks');
  if (!clicks) {
$("#"+numero).show();
 } else {
$("#"+numero).hide();
  }
  $(this).data("clicks", !clicks);
  }
</script>
<style type="text/css">
.domanda, .risposta{
width:100%;
min-height:30px;
border:1px solid;
color:#000;
padding:5px;
}
.risposta{
display:none;
}</style>
<title>Titolo della tua pagina</title>
</head>

<body>
<div class="domanda" onclick="apriDomanda('1');">Clicca per vedere la domanda 1</div>
<div class="risposta" id="1">Questa è la risposta alla tua domanda 1!</div>
</body>
</html>
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:
<link rel="stylesheet" type="text/css" href="miofile.css">
Stessa cosa puoi fare con il jQuery, creando un file .js:
Codice:
<script type="text/javascript" src="miofile.js"></script>
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:

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

Tapatalk

Utente Esperto
28 Agosto 2013
1.264
90
53
20
Bellaria
Miglior risposta
3
#6
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
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:
<a href="pagina1.html">Domande utente</a> <a href="pagina2.html">Domande acquisti</a>
Poi ai tag <a> dai lo stile che vuoi insomma..
 
Shoutbox
  1. #KiK #KiK: caz
  2. #KiK #KiK: adesso basta con sto continuo spam o vi brucio la casa
  3. #KiK #KiK: io no mbare
  4. E Ezio91: Vorrei sapere il mio profilo clash royale quanto vale come posso fare?
  5. #James #James: https://www.sciax2.it/forum/threads/buddybank-40-euro-alla-registrazione-solo-ios.700660/
  6. #KiK #KiK: vi offro un po di kaffè per ogni parola che commentate
  7. #KiK #KiK: caz ascoltate e rispondete animali
  8. #KiK #KiK: https://www.sciax2.it/forum/threads/me-gusta-remix.700705/
  9. #Gigius #Gigius: Salve salvino
  10. Mr. Aizen Mr. Aizen: Buondì
  11. #KiK #KiK: eh è da un po di tempo che ormai sta così..
  12. Mardev Mardev: Ma come mai il forum è vuoto cosi ??
  13. #James #James: ueue
  14. #KiK #KiK: il mio kaffè è sempre on
  15. H Heazy962: C'è qualcuno on ?
  16. #KiK #KiK: io cerco un kaffè come si deve, posso partecipare lo stessooo????
  17. -Sicily94- -Sicily94-: Cerco beta testers, o persone che cercando un retro fatto come si deve: https://www.sciax2.it/forum/threads/progetto-sicily-hotel-beta-test-serio.700314/
  18. #KiK #KiK: Ma ciao piccolo fiore
  19. ToadFungoso ToadFungoso: buonaserissima vestito elegante
  20. #KiK #KiK: buongiornissimo, kaffè?
  21. #KiK #KiK: eh per fortuna ci siamo noi che spariamo boiate per intrattenerci a vicenda
  22. #James #James: maro è proprio strano non vedere quasi nessuno sul forum
  23. #James #James: fratm
  24. Mardev Mardev: proprio forte sto james
  25. #KiK #KiK: O M G mi hai tolto le parole dalla bocca
Top