toggle faq fichiers

web/themes/custom/eql/css-compiled/styles.css

@@ -1350,44 +1350,49 @@ a {
             float: right; }
         .path-faq #block-contenudelapageprincipale .block-region-content .block-views-blockfaq-block-1 div:first-child .node-type-question_reponse .field--name-field-reponse {
           display: none; }
-        .path-faq #block-contenudelapageprincipale .block-region-content .block-views-blockfaq-block-1 div:first-child .node-type-question_reponse .opened {
+        .path-faq #block-contenudelapageprincipale .block-region-content .block-views-blockfaq-block-1 div:first-child .node-type-question_reponse .field--name-field-fichiers {
-          display: block; }
-        .path-faq #block-contenudelapageprincipale .block-region-content .block-views-blockfaq-block-1 div:first-child .node-type-question_reponse .field--name-field-fichiers span:nth-of-type(2) {
           display: none; }
-        .path-faq #block-contenudelapageprincipale .block-region-content .block-views-blockfaq-block-1 div:first-child .node-type-question_reponse .field--name-field-fichiers .file--mime-application-pdf span:nth-of-type(2) {
+          .path-faq #block-contenudelapageprincipale .block-region-content .block-views-blockfaq-block-1 div:first-child .node-type-question_reponse .field--name-field-fichiers span:nth-of-type(2) {
-          display: none; }
+            display: none; }
-        .path-faq #block-contenudelapageprincipale .block-region-content .block-views-blockfaq-block-1 div:first-child .node-type-question_reponse .field--name-field-fichiers .file--mime-application-pdf ::before {
+          .path-faq #block-contenudelapageprincipale .block-region-content .block-views-blockfaq-block-1 div:first-child .node-type-question_reponse .field--name-field-fichiers .file--mime-application-pdf span:nth-of-type(2) {
-          display: inline-block;
+            display: none; }
-          content: url("../images/pictos/noun_Download_file_307900.svg");
+          .path-faq #block-contenudelapageprincipale .block-region-content .block-views-blockfaq-block-1 div:first-child .node-type-question_reponse .field--name-field-fichiers .file--mime-application-pdf ::before {
-          width: 30px;
-          height: 30px;
-          padding-right: 0.8rem; }
-        .path-faq #block-contenudelapageprincipale .block-region-content .block-views-blockfaq-block-1 div:first-child .node-type-question_reponse .field--name-field-fichiers .file--mime-application-pdf a {
-          display: inline-flex;
-          align-items: center;
-          color: black;
-          font-weight: 800; }
-        .path-faq #block-contenudelapageprincipale .block-region-content .block-views-blockfaq-block-1 div:first-child .node-type-question_reponse .field--name-field-liens a {
-          display: flex;
-          flex-direction: row;
-          justify-content: left;
-          align-items: center;
-          color: black;
-          font-weight: 800; }
-          .path-faq #block-contenudelapageprincipale .block-region-content .block-views-blockfaq-block-1 div:first-child .node-type-question_reponse .field--name-field-liens a:before {
             display: inline-block;
-            content: url("../images/pictos/noun_External Link_674151.svg");
+            content: url("../images/pictos/noun_Download_file_307900.svg");
             width: 30px;
             height: 30px;
             padding-right: 0.8rem; }
-        .path-faq #block-contenudelapageprincipale .block-region-content .block-views-blockfaq-block-1 div:first-child .node-type-question_reponse .field--name-field-liens svg {
+          .path-faq #block-contenudelapageprincipale .block-region-content .block-views-blockfaq-block-1 div:first-child .node-type-question_reponse .field--name-field-fichiers .file--mime-application-pdf a {
+            display: inline-flex;
+            align-items: center;
+            color: black;
+            font-weight: 800; }
+        .path-faq #block-contenudelapageprincipale .block-region-content .block-views-blockfaq-block-1 div:first-child .node-type-question_reponse .field--name-field-liens {
           display: none; }
+          .path-faq #block-contenudelapageprincipale .block-region-content .block-views-blockfaq-block-1 div:first-child .node-type-question_reponse .field--name-field-liens a {
+            display: flex;
+            flex-direction: row;
+            justify-content: left;
+            align-items: center;
+            color: black;
+            font-weight: 800; }
+            .path-faq #block-contenudelapageprincipale .block-region-content .block-views-blockfaq-block-1 div:first-child .node-type-question_reponse .field--name-field-liens a:before {
+              display: inline-block;
+              content: url("../images/pictos/noun_External Link_674151.svg");
+              width: 30px;
+              height: 30px;
+              padding-right: 0.8rem; }
+          .path-faq #block-contenudelapageprincipale .block-region-content .block-views-blockfaq-block-1 div:first-child .node-type-question_reponse .field--name-field-liens svg {
+            display: none; }
         .path-faq #block-contenudelapageprincipale .block-region-content .block-views-blockfaq-block-1 div:first-child .node-type-question_reponse .field--name-field-ress {
+          display: none;
           margin-top: 0.5rem; }
           .path-faq #block-contenudelapageprincipale .block-region-content .block-views-blockfaq-block-1 div:first-child .node-type-question_reponse .field--name-field-ress a {
             color: black;
             text-decoration: underline;
             font-weight: 800; }
+        .path-faq #block-contenudelapageprincipale .block-region-content .block-views-blockfaq-block-1 div:first-child .node-type-question_reponse .opened {
+          display: block; }
 
 .node-id-6 {
   background: url("../images/pictos/carre-contour-bleu_contact.svg");
@@ -1481,6 +1486,10 @@ a {
                 background: #09398b; }
                 .path-ressources.basededonnees .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockcollections-block-1 div:first-of-type .view-id-collections .view-content .views-row:hover a {
                   color: white; }
+              .path-ressources.basededonnees .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockcollections-block-1 div:first-of-type .view-id-collections .view-content .views-row .blue {
+                background: #09398b; }
+                .path-ressources.basededonnees .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockcollections-block-1 div:first-of-type .view-id-collections .view-content .views-row .blue a {
+                  color: white; }
             @media (max-width: 810px) {
               .path-ressources.basededonnees .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockcollections-block-1 div:first-of-type .view-id-collections .view-content {
                 flex-direction: column; }

web/themes/custom/eql/scripts/main.js

@@ -12,7 +12,7 @@ function toggleMenu(event) {
   burger.classList.toggle('opened');
 }
 
-
+//////////////////////////
 // faq reponse open 
 
 var answers = document.getElementsByClassName("field--name-field-reponse");
@@ -35,30 +35,136 @@ function toggleFaq(event) {
   let answer = this.parentNode.querySelector('.field--name-field-reponse');
   // console.log(answer); 
   answer.classList.add('opened');
-}
 
-// fleche qui tourne faq
+}
+///// répète fonction pour les fichiers, les liens et ressources
+//// il faudrait créer un tableau d'objet ?
+
+var fichiers = document.getElementsByClassName("field--name-field-fichiers");
 var questions = document.getElementsByClassName("field--name-field-question");
 
 for (let i = 0; i < questions.length; i++) {
   const question = questions[i]
-  question.addEventListener("click", toggleFaq);
+  question.addEventListener("click", toggleFaqFichiers);
 }
-function rotateFleche(event) {
+function toggleFaqFichiers(event) {
   console.log(event, this);
-  for (let i = 0; i < answers.length; i++) {
+for (let i = 0; i < fichiers.length; i++) {
-    answers[i].classList.remove('opened');  
+  fichiers[i].classList.remove('opened');  
-  }
+}
+let fichier = this.parentNode.querySelector('.field--name-field-fichiers');
+
+fichier.classList.add('opened');
 }
 
 
+//////
+var liens = document.getElementsByClassName("field--name-field-liens");
+var questions = document.getElementsByClassName("field--name-field-question");
+
+for (let i = 0; i < questions.length; i++) {
+  const question = questions[i]
+  question.addEventListener("click", toggleFaqLiens);
+}
+function toggleFaqLiens(event) {
+  console.log(event, this);
+for (let i = 0; i < liens.length; i++) {
+  liens[i].classList.remove('opened');  
+}
+let lien = this.parentNode.querySelector('.field--name-field-liens');
+ 
+lien.classList.add('opened');
+}
+
+var ressources = document.getElementsByClassName("field--name-field-ress");
+var questions = document.getElementsByClassName("field--name-field-question");
+
+for (let i = 0; i < questions.length; i++) {
+  const question = questions[i]
+  question.addEventListener("click", toggleFaqRessources);
+}
+function toggleFaqRessources(event) {
+  console.log(event, this);
+for (let i = 0; i < resources.length; i++) {
+  ressources[i].classList.remove('opened');  
+}
+let ressource = this.parentNode.querySelector('.field--name-field-ress');
+
+ressource.classList.add('opened');
+}
+///////////////////////////////
+// fleche qui tourne faq
+// var questions = document.getElementsByClassName("field--name-field-question");
+
+// for (let i = 0; i < questions.length; i++) {
+//   const question = questions[i]
+//   question.addEventListener("click", rotateFleche);
+// }
+// function rotateFleche(event) {
+//   console.log(event, this);
+//   // for (let i = 0; i < answers.length; i++) {
+//   //   answers[i].classList.remove('opened');  
+//   // }
+// }
+
+//////////////////////////////////////////
 // block collection reste bleu quand actif
 // idée: lorsque la div description du parent collection est en vue, appliquer 
 // la classe .activ{background-color:$blue-dark}
+// OU if class
+// const Autre = document.getElementsByClassName("");
+// const Historique = document.getElementsByClassName("");
+
+var descriptionAutre = document.getElementsByClassName("js-view-dom-id-b65e57a8672654a3b2a59e71c9f5ccfb730d7879c2c0096e324b0ce29b2a3b74").value
+console.log(descriptionAutre);
+// const descriptionHistorique = document.getElementsByClassName("js-view-dom-id-5c891f37126eb689016ea6da376ca1a15cc90c3dbcb394d063fb43dc16ec5250");
+
+
+var nameCollection = document.querySelectorAll(".path-ressources .basededonnees .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockcollections-block-1 .view-id-collections .view-content .views-row a").value
+console.log(nameCollection);
+
+// var descriptionCollection = document.getElementsByClassName("");
+
+// let nameCollection = { Autre: "Autres contributions sur la qualité du logement", Historique: "Histoire des expérimentations du logement depuis les années 1950 en Europe"};
+
+var Autre = "Autres contributions sur la qualité du logement"
+var Historique = "Histoire des expérimentations du logement depuis les années 1950 en Europe"
+console.log(Autre, Historique);
+
+// function getValue(){
+//   for (const nameCollection = Autre ){}
+
+//   if (nameCollection === Autre){
+//     return "Autres contributions sur la qualité du logement";
+//   }
+  
+// }
+
+// function blueBackground(){
+//   // console.log('nameCollection')
+//   // var descriptionCollection = document.getElementsByClassName("");
+// // if (descriptionCollection === descriptionAutre) 
+// //   nameCollection.addClass('blue');
+// if (getvalue === "Autres contributions sur la qualité du logement")
+// nameCollection.addClass('blue');
+// }
+
+
+// let inView = addEventListener("inView", blueBackground);
+// console.log(inView)
+
+// function blueBackground(event){
+//   console.log(event, this);
+
+// }
+
+//
+
+
+
+
 
-// var descriptionCollection = document.getElementsByClassName("views-field-description__value")
 
-// var
 // /////////////////
 //// ancre dans texte
 // document.querySelector('.paragraph--view-mode--textes-toc').click( function() {

web/themes/custom/eql/scss/pages/_basededonnees.scss

@@ -91,6 +91,12 @@
                                                     color: $white;  
                                                 }
                                             }
+                                            .blue{
+                                                background: $blue-dark;
+                                                a{
+                                                    color: $white;  
+                                                }
+                                            }
             
                                         }
                                         @media (max-width: 810px){

web/themes/custom/eql/scss/pages/_faq.scss

@@ -146,10 +146,9 @@
                         .field--name-field-reponse{
                                 display: none;
                         }
-                        .opened{
+
-                         display: block;       
-                        }
                         .field--name-field-fichiers{  
+                            display: none;      
                             span:nth-of-type(2){
                                 display: none;
                             }
@@ -173,8 +172,9 @@
                                 }
                             }
                         } 
-                        .field--name-field-liens{
                          
+                        .field--name-field-liens{
+                            display: none;
                             a{
                                 &:before{
                                     display: inline-block;
@@ -195,6 +195,7 @@
                             }
                         }
                         .field--name-field-ress{
+                            display: none;
                             margin-top: 0.5rem;
             
                             a{
@@ -203,6 +204,10 @@
                                 font-weight: 800;
                             }
                         }
+
+                        .opened{
+                            display: block;
+                        }
                     }
                 }
             }    

web/themes/custom/eql/templates/views-view-unformatted.html.twig

@@ -0,0 +1,34 @@
+{#
+/**
+ * @file
+ * Theme override to display a view of unformatted rows.
+ *
+ * Available variables:
+ * - title: The title of this group of rows. May be empty.
+ * - rows: A list of the view's row items.
+ *   - attributes: The row's HTML attributes.
+ *   - content: The row's content.
+ * - view: The view object.
+ * - default_row_class: A flag indicating whether default classes should be
+ *   used on rows.
+ *
+ * @see template_preprocess_views_view_unformatted()
+ */
+#}
+{% if title %}
+  <h3>{{ title }}</h3>
+{% endif %}
+{% for row in rows %}
+  {%
+    set row_classes = [
+      default_row_class ? 'views-row',
+    ]
+  %}
+
+  {%
+    set collection = '#collection-id--' ~ a.content
+  %}
+  <div{{ row.attributes.addClass(row_classes, collection) }}>
+    {{- row.content -}}
+  </div>
+{% endfor %}