Terrible

Bienvenue sur Terrible, le forum de libre-service pour vos codages de forums. Venez trouver ici toutes sortes de codes pour agrémenter aussi bien vos templates que vos messages, sans avoir besoin d'inscription !


Terrible :: Codes messages :: Divers
avatar
le Dim 25 Fév 2018 - 14:38

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.



Éditez la couleur dans :root pour changer la couleur au survol

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">

Les deux champs EDITER doivent être identiques. Je vous conseille de préfixer pour vous faciliter la vie (comme dans mon code actuel, avec faq-one, faq-two, faq-three...

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>
Permission de ce forum:
Vous pouvez répondre aux sujets dans ce forum