templates/front/faq.html.twig line 1

Open in your IDE?
  1. {% extends 'layout_website.html.twig' %}
  3. {% block title %}FAQ
  4. {% endblock %}
  7. {% block stylesheets %}
  8.     {{parent()}} 
  9.     <style>
  10.         .faq {
  11.             border-radius: 4px;
  12.             margin:2rem 0;
  13.         }
  15.         .faq .card {
  16.             border: none;
  17.             background: none;
  18.             border-bottom: 1px solid #DADADA;
  19.         }
  21.         .faq .card .card-header {
  22.             padding: 0px;
  23.             border: none;
  24.             background: none;
  25.             -webkit-transition: all 0.3s ease 0s;
  26.             -moz-transition: all 0.3s ease 0s;
  27.             -o-transition: all 0.3s ease 0s;
  28.             transition: all 0.3s ease 0s;
  29.         }
  31.         .faq .card .card-header:hover {
  33.             background: #fffd6a60;
  34.             padding-left: 10px;
  35.         }
  36.         .faq .card .card-header .faq-title {
  37.             width: 100%;
  38.             text-align: left;
  39.             padding: 0px;
  40.             padding-left: 5px;
  41.             padding-right: 5px;
  42.             font-weight: bold;
  43.             font-size: 1.2rem;
  44.             letter-spacing: 1px;
  45.             color: #000;
  46.             text-decoration: none !important;
  47.             -webkit-transition: all 0.3s ease 0s;
  48.             -moz-transition: all 0.3s ease 0s;
  49.             -o-transition: all 0.3s ease 0s;
  50.             transition: all 0.3s ease 0s;
  51.             cursor: pointer;
  52.             padding-top: 20px;
  53.             padding-bottom: 20px;
  54.             display: flex;
  55.             align-content: center;
  56.             align-items: center;
  57.             margin-top: 0;
  58.         }
  60.         .faq .card .card-header .faq-title .badge {
  61.             display: inline-block;
  62.             width: 20px;
  63.             height: 20px;
  64.             line-height: 14px;
  65.             float: left;
  66.             -webkit-border-radius: 100px;
  67.             -moz-border-radius: 100px;
  68.             border-radius: 100px;
  69.             text-align: center;
  70.             background: #337ab7;
  71.             color: #fff;
  72.             font-size: 12px;
  73.             margin-right: 20px;
  74.         }
  76.         .faq .card .card-body {
  77.             padding: 0;
  78.             font-weight: 400;
  79.             font-size: 16px;
  80.             color: #000;
  81.             line-height: 28px;
  82.             letter-spacing: 1px; 
  83.             text-align: left;
  84.             padding-left: 30px;
  85.             padding-right: 30px;
  86.         }
  88.         .faq .card .card-body p {
  89.             margin-top: 4px;
  90.             margin-bottom: 14px;
  91.             font-size: 1.1rem;
  92.         }
  94.         @media (max-width: 991px) {
  95.             .faq {
  96.                 margin-bottom: 30px;
  97.             }
  98.             .faq .card .card-header .faq-title {
  99.                 line-height: 26px;
  100.                 margin-top: 10px;
  101.             }
  102.         }
  104. .body-faq h2{
  105.     text-align:center;
  106.     color: #33e599;
  107. }
  108. .blockFaq{ 
  109.   margin-bottom: 2rem;
  110. }
  111. .titre{
  112. width: 100%;
  113. text-align: left;
  114.     color: #33e599;
  115.     font-size: 1.6rem; 
  116. }
  117. .faqdet{
  118. width: 100%;
  119. }
  120.     </style>
  121.     <link rel="stylesheet" type="text/css" media="all" href="{{ asset('css/style.css') }}">
  122. {% endblock %}
  124. {% block body_container %}
  125.     <div id="pages" class="body-faq">
  126.  
  127.         <div class="container">
  128.             <div class="faq col-md-12">
  129.                 <h2>FAQ</h2>
  131. {% for Faqm in Faqmod %}
  132. <div class="blockFaq">
  133.     <div class="titre">{{ Faqm.Titre }}</div>
  134.     <div class="faqdet">
  135.         {% for Faq in Faqm.Liste %}
  136.                             <div class="card">
  137.                                 <div class="card-header" id="faqHeading-{{ Faq.id }}">
  138.                                     <div class="mb-0">
  139.                                         <h5 class="faq-title" data-toggle="collapse" data-target="#faqCollapse-{{ Faq.id }}" data-aria-expanded="false" data-aria-controls="faqCollapse-{{ Faq.id }}" data-urltar="{{ Faq.Titre|slugify }}">{{ Faq.Titre | raw }}</h5>
  140.                                     </div>
  141.                                 </div>
  142.                                 <div id="faqCollapse-{{ Faq.id }}" class="collapse" aria-labelledby="faqHeading-{{ Faq.id }}" data-parent="#accordion">
  143.                                     <div class="card-body">
  144.                                         {{ Faq.Detail | raw }}
  145.                                     </div>
  146.                                 </div>
  147.                             </div>
  148.         {% endfor %}
  149.     </div>
  151. </div>
  153. {% endfor %}        
  157.             </div>
  158.         </div>
  159. </div>
  160. {% endblock %}
  162. {% block javascripts %}
  163.         
  164. <script>
  166. $("a[href$='#']").on('click', function () {
  167.     openreduc()
  168. })
  170. $('.faq-title').on('click', function () {
  171.     let trg = $(this).attr('data-target')
  172.     let text = $(this).attr('data-urltar')
  173.     if( $( trg ).hasClass( "collapse" ) ){
  174.         $( trg ).removeClass('collapse') 
  175.     window.location.hash = text
  176.     }else{
  177.         $( trg ).addClass('collapse') 
  178.         let nurl = window.location.href.replace(window.location.hash, ''); 
  179. //    window.location.hash = ''
  180.     window.history.pushState("", "", nurl);
  181.     }
  184. });
  186. $(document).ready(function () {
  187. var hash   = window.location.hash;
  188. hash = hash.substring(1)
  189.     $( ".faq-title" ).each(function( index ) {
  190.         if( hash == $( this ).attr('data-urltar') ){
  192.             // deplier l'élément
  193.             $( $(this).attr('data-target') ).removeClass('collapse') 
  194.             // scroll jusqu'a l'élément
  195.                 $('html,body').animate({
  196.                 scrollTop: $(this).offset().top - 50
  197.             }, 'slow');
  198.         } 
  199.     });
  201. });
  203. </script>
  204.        
  205. {% endblock %}