toggle faq fichiers

2022-01-18 11:02:09 +01:00
parent d2cb8a68c8
commit f1b0adf4d8
5 changed files with 202 additions and 42 deletions
@@ -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++) {
-    answers[i].classList.remove('opened');  
-  }
+for (let i = 0; i < fichiers.length; i++) {
+  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() {