js merge table cell

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

@@ -31,6 +31,12 @@ table {
 #paragraph-id--227 td {
   text-align: start; }
 
+#tablefield-wrapper-paragraph-240-field_tablefield-0 {
+  margin-bottom: 2rem; }
+
+#tablefield-paragraph-240-field_tablefield-0 {
+  caption-side: bottom; }
+
 .note {
   display: block;
   border: 1px solid #333;

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

@@ -1,159 +1,16 @@
 console.log('salut');
-// menu burger open
 
-var burger = document.getElementById("block-burger");
-var burgertitle = document.getElementById("block-burger-menu");
+// fusion cellules dans tableau
 
+var table1cell1 = document.querySelector('#tablefield-paragraph-34-field_tablefield-0.tablefield tbody tr td.row_1.col_1');
+var table1cell2 = document.querySelector('#tablefield-paragraph-34-field_tablefield-0.tablefield tbody tr td.row_2.col_1');
+var table1cell3 = document.querySelector('#tablefield-paragraph-34-field_tablefield-0.tablefield tbody tr td.row_3.col_1');
+var table1cell4 = document.querySelector('#tablefield-paragraph-34-field_tablefield-0.tablefield tbody tr td.row_4.col_1');
 
-burgertitle.addEventListener("click", toggleMenu);
+table1cell1.setAttribute('rowspan', '4');
+table1cell2.style.display ="none";
+table1cell3.style.display ="none";
+table1cell4.style.display ="none";
 
-function toggleMenu(event) {
-  // console.log(event);
-  burger.classList.toggle('opened');
-}
 
-//////////////////////////
-// faq reponse open 
-
-var answers = document.getElementsByClassName("field--name-field-reponse");
-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);
-}
-function toggleFaq(event) {
-  // console.log(event, this);
-  // fermé tout
-  for (let i = 0; i < answers.length; i++) {
-    answers[i].classList.remove('opened');  
-  }
-  // la réponse correspndante a la question clické
-  //           | this c'est l'élément sur le quel on a clické
-  //           |    |le parent |la réponse dans le parent
-  let answer = this.parentNode.querySelector('.field--name-field-reponse');
-  // console.log(answer); 
-  answer.classList.add('opened');
-
-}
-///// 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", toggleFaqFichiers);
-}
-function toggleFaqFichiers(event) {
-  // console.log(event, this);
-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");
-// var paragraph = document.querySelector('.field--name-field-question p::after');
-// console.log(paragraph)
-// var styles = window.getComputedStyle(element,':after')
-// console.log(styles)
-// var content = styles['content']
-// console.log(content)
-
-
-// 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
-     
-jQuery(function($) {
-    var path = window.location.href; // because the 'href' property of the DOM element is the absolute path
-  console.log(path);
-  $(".view-id-collections .view-content .views-row a").each(function() {
-   if (this.href === path) {
-    $(this).parent().closest('.views-row').addClass('active');
-   }
-  });
- });
-
-
-
-
-
-// /////////////////
-//// ancre dans texte au click parragraphe correspondant arrive en dessous du header 
-
-
-(function($, window) {
-  var adjustAnchor = function() {
-      var $anchor = $('.block-entity-fieldnodefield-textes'),
-              fixedElementHeight = 350;
-      if ($anchor.length > 0) {
-          $('html, body').stop().animate({scrollTop: $anchor.offset().top - fixedElementHeight }, 0);
-      }
-  };
-
-  $(window).on('hashchange', function() {
-      adjustAnchor();
-  });
-
-})(jQuery, window);
-
-
-// ///////////////////////////////
 

web/themes/custom/rorschach/scss/components/_tablefields.scss

@@ -48,3 +48,31 @@ table{
     }
 }
 
+// tableau collpase cell within column
+
+#tablefield-wrapper-paragraph-240-field_tablefield-0{
+    margin-bottom: 2rem;
+
+}
+#tablefield-paragraph-240-field_tablefield-0{
+    caption-side:bottom;
+    // display: flex;
+    // flex-direction: column;
+    // empty-cells:hide;
+
+    tbody{
+
+        // td.row_2.col_1{
+        //     display: none;
+        // }
+        // td.row_3.col_1{
+        //     display: none;
+        // }
+        // td.row_4.col_1{
+        //     display: none;
+        // }
+    
+    }
+
+
+}