Adding parallel text functionality

src/scripts/modules/accordion.js

@@ -6,6 +6,7 @@ export default () => {
     if (
       !$('.publications-popup').is(e.target)
       && !$('.publications-popup-eye').is(e.target)
+      && !$('.publications-popup-para').is(e.target)
       && !$('.publications-popup-sup').is(e.target)
     ) {
       $(this).closest('.accordion__item').toggleClass('active');
@@ -98,6 +99,40 @@ export default () => {
     });
   });
 
+  $('button.publications-popup-para').on('click', function popuppara(e) {
+    e.preventDefault();
+    const text = $(this).data('content');
+    const title = $(this).data('title');
+    const elementClassic = `<div class="infobox active"><h4 class="infobox__title">${title}</h4><p class="infobox__description">${text}</p></div>`;
+    if (!$(this).hasClass('active')) {
+      $(this).after(elementClassic);
+      $(this).addClass('active');
+    } else {
+      $(this).next().remove();
+      $(this).removeClass('active');
+    }
+
+    const infobox = $(this).parent().find('.infobox');
+
+    infobox.each((index, element) => {
+      if (index === 0) {
+        $(element).addClass('infobox--arrow-left');
+        $(element).removeClass('infobox--arrow-top');
+        $(element).css({ top: 0 });
+      } else {
+        $(element).addClass('infobox--arrow-top');
+        $(element).removeClass('infobox--arrow-left');
+
+        let topElem = 0;
+        for (let i = 0; i < index; i += 1) {
+          topElem = topElem + $(infobox[i]).outerHeight() + 20;
+        }
+        $(element).css({ top: `${topElem}px` });
+      }
+    });
+  });
+
+
   $('button.publications-popup-sup').on('click', function popupsup(e) {
     e.preventDefault();
     const text = $(this).data('content');
@@ -157,12 +192,14 @@ export default () => {
       && infobox.has(e.target).length === 0
       && !$('.publications-popup-eye').is(e.target)
       && !$('.publications-popup-sup').is(e.target)
+      && !$('.publications-popup-para').is(e.target)
       && !$('.publications-popup-text').is(e.target)
     ) {
       infobox.remove();
       $('.publications-popup').removeClass('active');
       $('.publications-popup-eye').removeClass('active');
       $('.publications-popup-sup').removeClass('active');
+      $('.publications-popup-para').removeClass('active');
       $('.publications-popup-text').removeClass('active');
       e.stopPropagation();
     }

src/styles/components/accordion.scss

@@ -214,6 +214,28 @@
   }
 }
 
+.publications-popup-para {
+  float: right;
+  border: 0;
+  margin: 0 3px 9px;
+  background-color: transparent;
+  display: block;
+  width: 22px;
+  height: 18px;
+  background-image: url('../assets/images/icons/icon-translation.svg');
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
+  outline: none;
+
+  @include media--max($width--phone) {
+    float: none;
+    width: 14px;
+    height: 14px;
+    margin: 0 auto 9px;
+  }
+}
+
 .publications2 {
   & .publications__overview {
     & .accordion__content {