• 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. S Santa Elera: Ho un problema con il mio telefonino
  2. S Santa Elera: C'è qualcuno che può aiutarmi?
  3. #KiK #KiK: CAFONE
  4. #KiK #KiK: ma come parla
  5. 404NotFound 404NotFound: figa
  6. topolino1958 topolino1958: Ragazzi dove posso postare un canale telegram per pubblicità?
  7. Cristoforo58 Cristoforo58: Sono vietati link esterni a Sciax2 in shoutbox, grazie.
  8. Mr_Joker Mr_Joker: vi ricordiamo che domani pomeriggio dalle 2-5pm "Sunake Hotel" apre le selezioni a diverse posizione staff.
  9. Forzaese23 Forzaese23: retro babbo
  10. #KiK #KiK: createlo amikoooo
  11. B bbhojjjj76: fake login habbo ne avete?
  12. N NeroWhite BO: Buonasera
  13. #Egzon14 #Egzon14: dunque possiamo definirli morti i retro
  14. #Egzon14 #Egzon14: habbo passerà ad unity
  15. #KiK #KiK: ma infatti
  16. #Egzon14 #Egzon14: ancora con sti retro habbo
  17. M mikiamo2012: Qualcuno per creare retro habbo?
  18. topolino1958 topolino1958: Ragazzi dove posso postare un canale telegram per pubblicità?
  19. #KiK #KiK: e poi ci sono io che vado a sorseggiare un po di kaffè su habbo inglese
  20. #Egzon14 #Egzon14: è proprio morto sciax2
  21. #KiK #KiK: Amiciii come statee
  22. #KiK #KiK: Cerco staff per la mia kaffetteriaaaa
  23. LogR LogR: Cerco tutto lo staff per il mio retroserver
  24. LogR LogR: https://www.sciax2.it/forum/threads/cerco-team-progetto-pronto.700516/
  25. A AnonymousOwna: Lubex Hotel è online vi aspetto
Top