7 Steps to the Best CSS FAQ Accordion for Schema Markup

<style>
/* The "Make My FAQs Look Gorgeous" CSS - 2025 Edition */
.faqcss div[itemtype="https://schema.org/FAQPage"] {
  margin: 2rem auto;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

/* Question styling - the clickable headers */
.faqcss div[itemtype="https://schema.org/Question"] {
  margin-bottom: 1.25rem;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
  overflow: hidden;
}

.faqcss div[itemtype="https://schema.org/Question"]:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

/* Question headers */
.faqcss h2[itemprop="name"] {
  padding: 1.25rem 3rem 1.25rem 1.5rem;
  margin: 0;
  font-size: 0.9rem;
  font-weight: 500;
  color: #111;
  position: relative;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s;
}

/* The fancy plus/minus icon */
.faqcss h2[itemprop="name"]::after {
  content: '+';
  position: absolute;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  color: #0073aa;
  transition: all 0.2s;
}

/* Answer container styling */
.faqcss div[itemtype="https://schema.org/Answer"] {
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease-out;
  padding: 0 1.5rem;
}

/* The actual answer text */
.faqcss div[itemprop="text"] {
  padding: 1.5rem;
  color: #444;
  line-height: 1.6;
}

.faqcss div[itemprop="text"] p {
  margin-top: 0;
}

/* Active state styling (when expanded) */
.faqcss div[itemtype="https://schema.org/Question"].active {
  background: #f8f9fa;
}

.faqcss div[itemtype="https://schema.org/Question"].active h2[itemprop="name"] {
  color: #0073aa;
  background: rgba(0, 115, 170, 0.05);
}

.faqcss div[itemtype="https://schema.org/Question"].active h2[itemprop="name"]::after {
  content: '−';
  transform: translateY(-50%) rotate(0deg);
}

/* The footer link styling */
.faqcss div[itemtype="https://schema.org/FAQPage"] > p {
  text-align: center;
  margin-top: 2rem;
  font-size: 0.95rem;
  opacity: 0.8;
}

.faqcss div[itemtype="https://schema.org/FAQPage"] > p a {
  color: #0073aa;
  text-decoration: none;
  font-weight: 500;
}

.faqcss div[itemtype="https://schema.org/FAQPage"] > p a:hover {
  text-decoration: underline;
}

/* Responsive adjustments for small screens */
@media (max-width: 768px) {
  .faqcss h2[itemprop="name"] {
    padding: 1rem 2.5rem 1rem 1rem;
    font-size: 0.75rem;
  }
  
  .faqcss h2[itemprop="name"]::after {
    right: 0.75rem;
  }
  
  .faqcss div[itemprop="text"] {
    padding-bottom: 0.75rem;
  }
}

/* We'll handle the column layout via JavaScript instead of media queries */
/* This allows us to check the container width rather than viewport width */
/<style>

<script>
document.addEventListener('DOMContentLoaded', function() {
  // First, check if any FAQ elements exist on this page
  const faqContainer = document.querySelector('.faqcss div[itemtype="https://schema.org/FAQPage"]');
  
  // Only run the FAQ code if we actually found FAQs
  if (faqContainer) {
    const questions = document.querySelectorAll('.faqcss div[itemtype="https://schema.org/Question"]');
    
    // Add this function to handle column layout based on container width
    function adjustFAQColumns() {
      const container = document.querySelector('.faqcss');
      if (!container) return;
      
      // Check container width, not viewport width
      if (container.offsetWidth >= 1025) {
        // Wide container - use two columns
        faqContainer.style.columnCount = "2";
        faqContainer.style.columnGap = "40px";
        
        // Make sure FAQ items don't break across columns
        questions.forEach(item => {
          item.style.breakInside = "avoid";
          item.style.pageBreakInside = "avoid"; 
          item.style.display = "inline-block";
          item.style.width = "100%";
        });
        
        // Footer spans all columns if present
        const footer = faqContainer.querySelector('p');
        if (footer) {
          footer.style.columnSpan = "all";
        }
      } else {
        // Narrow container - use one column
        faqContainer.style.columnCount = "1";
        faqContainer.style.columnGap = "0";
        
        // Reset any column-specific styles
        questions.forEach(item => {
          item.style.display = "block";
        });
      }
    }
    
    // Call it initially and on resize
    adjustFAQColumns();
    window.addEventListener('resize', adjustFAQColumns);
    
    questions.forEach(function(question, index) { // Added index parameter here
      const header = question.querySelector('h2[itemprop="name"]');
      const answer = question.querySelector('div[itemtype="https://schema.org/Answer"]');
      const answerContent = question.querySelector('div[itemprop="text"]');
      
      // Initialize collapsed state
      answer.style.height = '0px';
      
      // If this is the first question, open it automatically after a tiny delay
      if (index === 0) {
        setTimeout(function() {
          question.classList.add('active');
          answer.style.height = answerContent.offsetHeight + 'px';
        }, 50); // Small delay to ensure proper height calculation
      }
      
      header.addEventListener('click', function() {
        const isActive = question.classList.contains('active');
        
        // Close all questions first
        questions.forEach(q => {
          q.classList.remove('active');
          q.querySelector('div[itemtype="https://schema.org/Answer"]').style.height = '0px';
        });
        
        // If wasn't active, open this question
        if (!isActive) {
          question.classList.add('active');
          answer.style.height = answerContent.offsetHeight + 'px';
        }
      });
    });
    
    // Bonus: Handle window resizing to fix heights when screen size changes
    window.addEventListener('resize', function() {
      const activeQuestion = document.querySelector('.faqcss div[itemtype="https://schema.org/Question"].active');
      if (activeQuestion) {
        const answer = activeQuestion.querySelector('div[itemtype="https://schema.org/Answer"]');
        const answerContent = activeQuestion.querySelector('div[itemprop="text"]');
        answer.style.height = answerContent.offsetHeight + 'px';
      }
    });
  }
});
</script>