Персонализирана Детска Термо Бутилка за Вода

/* -- The root styles must go in the element of the structure with the name "Accordion". --*/ 

.faq-6__accordion{
  column-count: 2;
  column-gap: var(--grid-gap);
  padding-inline-start: 0px;

  & .faq-6__accordion-item{
    break-after: avoid;
    -webkit-break-inside: avoid-column; /* Safari */
    break-inside: avoid-column; /* Standar */
    -moz-break-inside: avoid-column; /* Firefox */

    &:last-child{
      margin-bottom: 0;
    }
  }

  @media (max-width: 767px){
    column-count: 1;
  }
}

/* The purpose of the script is to have the aria-expanded and aria-controls attributes for web accessibility. 
 You can remove this script and the accordion will still work. */
const btnFaq = document.querySelectorAll('.faq-6__question');
const contentFaq = document.querySelectorAll('.faq-6__answer');

btnFaq.forEach((button) => {
  button.addEventListener('click', () => {
    // Gets the current state of the button
    const isExpanded = button.getAttribute('aria-expanded') === 'true';

    // Reset all buttons to "false".
    btnFaq.forEach((currentBtn) => {
      currentBtn.setAttribute('aria-expanded', 'false');
    });

    // Changes the status of the current button
    button.setAttribute('aria-expanded', isExpanded ? 'false' : 'true');
  });
});

// Load function after HTML content is loaded
document.addEventListener('DOMContentLoaded', function () {
  // Make a tour on each button there is
  btnFaq.forEach((button, i) => {
    const contentId = contentFaq[i].getAttribute('id');
    button.setAttribute('aria-controls', contentId);
  });
});

const questionAccordion = document.querySelectorAll('.faq-6__accordion-item').length;
const valueCountQuestion = Math.round(questionAccordion / 2);

const dynamicStyle = document.createElement('style');
dynamicStyle.textContent = `
  .faq-6 .faq-6__accordion .faq-6__accordion-item:nth-child(${valueCountQuestion}) {
    -webkit-column-break-after: always;
    break-after: always;
    margin-bottom:0;

    @media(max-width: 767px){
    		-webkit-column-break-after: auto;
        break-after: auto;
        margin-bottom: var(--space-s);
    }
  }
`;

// Add the style to the head of the document or to a specific element
document.head.appendChild(dynamicStyle);