Questions fréquentes
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.
N'oubliez pas d'éditer le label et l'input pour ajouter une question !
- Code:
<input id="EDITER" type="checkbox" name="faq"><label for="EDITER">
Si vous souhaitez installer le CSS directement dans votre forum, voici le code à ajouter à votre feuille de style :
- Code:
/*FAQ PAR AWFUL*/
/*Import des polices*/
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700');
/*couleur d'accent (bordure et texte au survol)*/
:root {
--accent-color: #7154aa;
}
.faq-wrap {
width: 100%;
max-width: 700px;
margin: auto;
font-family: 'Source Sans Pro', sans-serif;
background: #fff;
}
.faq-wrap h2 {
font-size: 15px;
text-align: center;
background: #000;
color: #fff;
line-height: 8;
margin: 0;
text-transform: uppercase;
letter-spacing: 0.3em;
font-size: 0.75em;
font-family: 'Source Sans Pro', sans-serif;
font-weight: bold;
}
.faq-item {
position: relative;
margin-bottom: 1px;
color: #000;
overflow: hidden;
border-bottom: 1px solid #ccc;
-webkit-transition: all 0.4s;
transition: all 0.4s;
}
.faq-item:hover {
border-color: var(--accent-color);
}
.faq-item input {
position: absolute;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
z-index: -1;
}
.faq-item label {
position: relative;
display: block;
padding: 2em 4em!important;
font-weight: bold;
cursor: pointer;
-webkit-transition: all 0.4s;
transition: all 0.4s;
font-size: 15px;
}
.faq-item label b {
font-size: 0.75em;
position: absolute;
margin-left: -2em;
margin-top: 0.3em;
color: #000!important;
font-weight: normal;
}
.faq-item:hover label {
padding-left:3em;
color: var(--accent-color);
}
.faq-content {
max-height: 0;
overflow: hidden;
-webkit-transition: max-height .4s;
transition: max-height .4s;
}
.faq-content p {
margin: 2em;
font-size: 0.9em;
text-align: justify;
font-family: 'Source Sans Pro', sans-serif;
line-height: 1.3846;
}
.faq-item input:checked ~ .faq-content {
max-height: 600px;
}
.faq-item input[type=checkbox] + label:after {
content: "+";
color: #888;
position: absolute;
right: 40px;
top: 2em;
-webkit-transition: 0.4s;
transition: 0.4s;
}
.faq-item input[type=checkbox]:checked + label:after {
content: "-";
}
.faq-item:hover input[type=checkbox] + label:after {
right: 20px;
}
.faq-credit a {
text-decoration: none!important;
font-size: 8px;
color: #ccc!important;
text-transform: uppercase;
letter-spacing: 1px;
}
Et le code à poster dans votre message :
- Code:
<div class="faq-wrap"><h2>Questions fréquentes</h2><!--
--><div class="faq-item"><input id="faq-one" type="checkbox" name="faq"><label for="faq-one"><b>01</b>Label One</label><!--
--><div class="faq-content"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p></div></div><!--
--><div class="faq-item"><input id="faq-two" type="checkbox" name="faq"><label for="faq-two"><b>02</b>Label Two</label><!--
--><div class="faq-content"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p><!--
--></div></div><div class="faq-item"><input id="faq-three" type="checkbox" name="faq"><label for="faq-three"><b>03</b>Que se passe-t-il si j'écris une super longue question qui s'étendra probablement sur plusieurs lignes ? </label><div class="faq-content"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p></div></div><!--
--><div class="faq-credit"><a href="http://terrible.forumactif.org/" target="_blank">Awful</a></div></div>
Voilà le code si vous souhaitez tout poster dans le même message :
- Code:
<style>@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700');:root {--accent-color: #7154aa;}.faq-wrap {background: #fff;width: 100%;max-width: 700px;margin: auto;font-family: 'Source Sans Pro', sans-serif;}.faq-wrap h2 {font-size: 12px;text-align: center;background: #000;color: #fff;line-height: 6;margin: 0;text-transform: uppercase;letter-spacing: 0.3em;font-family: 'Source Sans Pro', sans-serif;font-weight: bold;}.faq-item {position: relative;margin-bottom: 1px;color: #000;overflow: hidden;border-bottom: 1px solid #ccc;-webkit-transition: all 0.4s;transition: all 0.4s;}.faq-item:hover {border-color: var(--accent-color);}.faq-item input {position: absolute;opacity: 0;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";z-index: -1;}.faq-item label {position: relative;display: block;padding: 2em 4em!important;font-weight: bold;cursor: pointer;-webkit-transition: all 0.4s;transition: all 0.4s;font-size: 15.7px;line-height:19px;}.faq-item label b {font-size: 0.75em;position: absolute;margin-left: -2em;margin-top: 0.3em;color: #000!important;font-weight: normal;}.faq-item:hover label {padding-left:3em!important;color: var(--accent-color);}.faq-content {max-height: 0;overflow: hidden;-webkit-transition: max-height .4s;transition: max-height .4s;}.faq-content p {line-height:1.3846; font-family:'Source Sans Pro', sans-serif;margin: 2em;font-size: 12px;text-align: justify;}.faq-item input:checked ~ .faq-content {max-height: 600px;}.faq-item input[type=checkbox] + label:after {content: "+";color: #888;position: absolute;right: 40px;top: 2em;-webkit-transition: 0.4s;transition: 0.4s;}.faq-item input[type=checkbox]:checked + label:after {content: "-";}.faq-item:hover input[type=checkbox] + label:after {right: 20px;}.faq-credit a {text-decoration: none!important;font-size: 8px;color: #ccc!important;text-transform: uppercase;letter-spacing: 1px;}</style>
<div class="faq-wrap"><h2>Questions fréquentes</h2><!--
--><div class="faq-item"><input id="faq-one" type="checkbox" name="faq"><label for="faq-one"><b>01</b>Label One</label><!--
--><div class="faq-content"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p></div></div><!--
--><div class="faq-item"><input id="faq-two" type="checkbox" name="faq"><label for="faq-two"><b>02</b>Label Two</label><!--
--><div class="faq-content"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p><!--
--></div></div><div class="faq-item"><input id="faq-three" type="checkbox" name="faq"><label for="faq-three"><b>03</b>Que se passe-t-il si j'écris une super longue question qui s'étendra probablement sur plusieurs lignes ? </label><div class="faq-content"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p></div></div><!--
--><div class="faq-credit"><a href="http://terrible.forumactif.org/" target="_blank">Awful</a></div></div>