aowlyne
FAQhelp avec ou sans "lire plus"
Bloc permettant de créer une FAQ.
Il y a 2 variants, avec ou sans "lire plus".

visuel avec "lire plus"
Lorem ipsum dolor sit amet, consectetur adipiscing elit ?
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a gravida ligula, nec sagittis nisi. Donec tincidunt lectus sed facilisis porttitor. Quisque sagittis malesuada justo et vehicula. Etiam dapibus dictum lacus at molestie. Etiam blandit fermentum dictum. Ut id ex nec dolor pulvinar posuere. Maecenas pharetra neque quam, at ornare sapien pharetra in. Ut sagittis vel orci ac hendrerit. Duis sit amet erat eget odio maximus porta vitae sit amet dui. Proin lacinia aliquam rhoncus. Vivamus nisl lacus, ultricies eget placerat blandit, molestie ut magna. Nunc ac lorem non est malesuada hendrerit. Etiam interdum magna et justo auctor porta. In dapibus ultrices augue, sed finibus leo bibendum vitae.

Vivamus dolor sapien, faucibus et posuere id, imperdiet eleifend nunc. Cras massa turpis, mollis vel viverra sed, iaculis non diam. Pellentesque imperdiet tortor non fringilla scelerisque. Nullam sollicitudin imperdiet ligula vitae mollis. Quisque sit amet justo urna. Duis vel nisl quis turpis ullamcorper maximus. Etiam porta quis lectus quis fringilla.
visuel sans "lire plus"
Lorem ipsum dolor sit amet, consectetur adipiscing elit ?
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a gravida ligula, nec sagittis nisi. Donec tincidunt lectus sed facilisis porttitor. Quisque sagittis malesuada justo et vehicula. Etiam dapibus dictum lacus at molestie. Etiam blandit fermentum dictum. Ut id ex nec dolor pulvinar posuere. Maecenas pharetra neque quam, at ornare sapien pharetra in. Ut sagittis vel orci ac hendrerit. Duis sit amet erat eget odio maximus porta vitae sit amet dui. Proin lacinia aliquam rhoncus. Vivamus nisl lacus, ultricies eget placerat blandit, molestie ut magna. Nunc ac lorem non est malesuada hendrerit. Etiam interdum magna et justo auctor porta. In dapibus ultrices augue, sed finibus leo bibendum vitae.
HTML avec lire plus

Code:

<faq><question>Lorem ipsum dolor sit amet, consectetur adipiscing elit ?</question>
<reponse>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a gravida ligula, nec sagittis nisi. Donec tincidunt lectus sed facilisis porttitor. Quisque sagittis malesuada justo et vehicula. Etiam dapibus dictum lacus at molestie. Etiam blandit fermentum dictum. Ut id ex nec dolor pulvinar posuere. Maecenas pharetra neque quam, at ornare sapien pharetra in. Ut sagittis vel orci ac hendrerit. Duis sit amet erat eget odio maximus porta vitae sit amet dui. Proin lacinia aliquam rhoncus. Vivamus nisl lacus, ultricies eget placerat blandit, molestie ut magna. Nunc ac lorem non est malesuada hendrerit. Etiam interdum magna et justo auctor porta. In dapibus ultrices augue, sed finibus leo bibendum vitae.

Vivamus dolor sapien, faucibus et posuere id, imperdiet eleifend nunc. Cras massa turpis, mollis vel viverra sed, iaculis non diam. Pellentesque imperdiet tortor non fringilla scelerisque. Nullam sollicitudin imperdiet ligula vitae mollis. Quisque sit amet justo urna. Duis vel nisl quis turpis ullamcorper maximus. Etiam porta quis lectus quis fringilla.</reponse><more /></faq>

HTML sans lire plus

Code:

<faq><question>Lorem ipsum dolor sit amet, consectetur adipiscing elit ?</question>
<reponse>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a gravida ligula, nec sagittis nisi. Donec tincidunt lectus sed facilisis porttitor. Quisque sagittis malesuada justo et vehicula. Etiam dapibus dictum lacus at molestie. Etiam blandit fermentum dictum. Ut id ex nec dolor pulvinar posuere. Maecenas pharetra neque quam, at ornare sapien pharetra in. Ut sagittis vel orci ac hendrerit. Duis sit amet erat eget odio maximus porta vitae sit amet dui. Proin lacinia aliquam rhoncus. Vivamus nisl lacus, ultricies eget placerat blandit, molestie ut magna. Nunc ac lorem non est malesuada hendrerit. Etiam interdum magna et justo auctor porta. In dapibus ultrices augue, sed finibus leo bibendum vitae.

Vivamus dolor sapien, faucibus et posuere id, imperdiet eleifend nunc. Cras massa turpis, mollis vel viverra sed, iaculis non diam. Pellentesque imperdiet tortor non fringilla scelerisque. Nullam sollicitudin imperdiet ligula vitae mollis. Quisque sit amet justo urna. Duis vel nisl quis turpis ullamcorper maximus. Etiam porta quis lectus quis fringilla.</reponse></faq>

CSS

Code:

:root {
  --font-icon: 'Material Icons';
  --primary1: #B53471;
  --neutral1: #2f3640;
  --neutral2: #ffffff;
  --br-md: 8px;
}

faq {
  display: block;
  border-radius: var(--br-md);
  padding: 8px;
  border-right: 8px solid;
  border-color: var(--primary1);
  background-color: var(--neutral2);
}

faq > question {
  display: inline-flex;
  align-items: center;
  text-align: left;
  gap: 10px;
  font-size: 20px;
  text-transform: uppercase;
  color: var(--primary1);
  font-style: normal;
}

faq > question:before {
  content: '\e887';
  color: var(--primary1);
  font-family: var(--font-icon);
  font-size: 22px;
}

faq > reponse {
  display: inline-block;
  color: var(--neutral1);
  text-align: justify;
  font-size: 12px;
  line-height: 18px;
  display: -webkit-box;
  -webkit-box-orient: vertical;  
  overflow: hidden;
  font-style: normal;
}

CSS pour le Lire Plus
Ajoute ce CSS à la suite

Code:

faq > reponse.-limitedLines {
  -webkit-line-clamp: 5; // nombre de lignes maximum a afficher
}

faq > reponse.-unlimitedLines {
  -webkit-line-clamp: unset;
}

faq > more {
  display: inline;
  cursor: help;
  font-size: 12px;
  line-height: 14px;
  color: var(--primary1);
}

faq > more.-readLess {
  cursor: pointer;
}

faq > more:before {
  content: "lire plus";
}

faq > more.-readLess:before {
  content: "voir moins";
}

JavaScript
Pour faire fonctionner le "lire plus" tu auras besoin d'ajouter du JavaScript, il devra être activé "sur les sujets".

Code:

//<![CDATA[
// FAQ MANAGE READ MORE
// BY AOWLYNE (https://owl-my-code.forumactif.com/)
$(document).ready(function () {
  var allQuestion = document.querySelectorAll('faq');

  $(allQuestion).each(function () {
    var reponse = $(this).find('reponse');
    var more = $(this).find('more');
    
    if(more.length > 0) {
      $(reponse).toggleClass('-limitedLines');
      
      $(more).click(function () {
        $(reponse).toggleClass('-unlimittedLines');
        $(more).toggleClass('-readLess');
      });
    }
  });
});
//]]>


Ce code utilise des tags custom, des variables CSS et nécessite l'installation de material icons, pour comprendre comment ça fonctionne, voici des liens utiles : les tags custom, les variables css et material icons. Pour installer un script voici un sujet explicatif.