Origami Style FAQ Component

A creative FAQ component with origami-inspired folding animations and paper-like design elements for a unique user experience.

Features

• Origami-inspired Design: Paper-like textures and folding animations inspired by traditional Japanese art
• Creative Visual Elements: Unique icons and fold patterns for visual interest
• Smooth Animations: Elegant transitions for expanding and collapsing FAQ items
• Paper Texture Effects: Subtle fold patterns and gradients for authentic paper appearance
• Accessible Design: Proper contrast ratios and keyboard navigation support
• Fully Responsive: Adapts to all screen sizes while maintaining origami effects

HTML Structure

<div class="origami-faq-container">
  <div class="faq-header">
    <h2 class="faq-title">Origami FAQ</h2>
    <p class="faq-subtitle">Unfolding knowledge like paper art</p>
  </div>
  
  <div class="faq-wrapper">
    <div class="faq-item">
      <div class="paper-fold"></div>
      <div class="faq-question">
        <div class="origami-icon"> crane </div>
        <h3>What is origami style design?</h3>
        <div class="question-icon">+</div>
      </div>
      <div class="faq-answer">
        <p>Origami style design uses folding animations and paper-like textures to create a unique visual experience inspired by traditional Japanese paper folding.</p>
      </div>
    </div>
    
    <div class="faq-item">
      <div class="paper-fold"></div>
      <div class="faq-question">
        <div class="origami-icon"> flower </div>
        <h3>How are the fold effects created?</h3>
        <div class="question-icon">+</div>
      </div>
      <div class="faq-answer">
        <p>The fold effects use CSS 3D transforms and perspective properties to simulate realistic paper folding animations.</p>
      </div>
    </div>
    
    <div class="faq-item">
      <div class="paper-fold"></div>
      <div class="faq-question">
        <div class="origami-icon"> boat </div>
        <h3>Is this design accessible?</h3>
        <div class="question-icon">+</div>
      </div>
      <div class="faq-answer">
        <p>Yes, the design maintains proper contrast ratios and includes keyboard navigation support for accessibility.</p>
      </div>
    </div>
    
    <div class="faq-item">
      <div class="paper-fold"></div>
      <div class="faq-question">
        <div class="origami-icon"> star </div>
        <h3>Can I customize the paper textures?</h3>
        <div class="question-icon">+</div>
      </div>
      <div class="faq-answer">
        <p>Absolutely! The component uses CSS custom properties for easy customization of paper colors, textures, and fold effects.</p>
      </div>
    </div>
  </div>
</div>

CSS Styles

.origami-faq-container {
  max-width: 800px;
  margin: 2rem auto;
  padding: 2rem;
  font-family: 'Inter', sans-serif;
  background: linear-gradient(135deg, #f0f4f8 0%, #d9e2ec 100%);
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.faq-header {
  text-align: center;
  margin-bottom: 3rem;
  position: relative;
  z-index: 2;
}

.faq-title {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  color: #2d3748;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.faq-subtitle {
  color: #4a5568;
  font-size: 1.1rem;
}

.faq-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  position: relative;
  z-index: 2;
}

.faq-item {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  position: relative;
  transform-origin: top center;
}

.faq-item:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.paper-fold {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 8px;
  background: linear-gradient(45deg, #e2e8f0 25%, transparent 25%), 
              linear-gradient(-45deg, #e2e8f0 25%, transparent 25%);
  background-size: 8px 8px;
  opacity: 0.3;
  z-index: 1;
}

.faq-question {
  display: flex;
  align-items: center;
  padding: 1.5rem;
  cursor: pointer;
  position: relative;
  z-index: 2;
}

.origami-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.2rem;
  margin-right: 1rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.faq-question h3 {
  margin: 0;
  font-size: 1.2rem;
  color: #2d3748;
  flex: 1;
}

.question-icon {
  font-size: 1.5rem;
  color: #718096;
  transition: all 0.3s ease;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.faq-item.active .question-icon {
  transform: rotate(45deg);
  color: #667eea;
}

.faq-answer {
  padding: 0 1.5rem;
  max-height: 0;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  background: #f8fafc;
  border-top: 1px solid #edf2f7;
  transform-origin: top center;
}

.faq-item.active .faq-answer {
  padding: 0 1.5rem 1.5rem;
  max-height: 200px;
}

.faq-answer p {
  margin: 1rem 0 0 0;
  color: #4a5568;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .origami-faq-container {
    padding: 1rem;
  }
  
  .faq-title {
    font-size: 2rem;
  }
  
  .faq-question {
    padding: 1rem;
  }
  
  .faq-question h3 {
    font-size: 1rem;
  }
  
  .origami-icon {
    width: 32px;
    height: 32px;
    font-size: 1rem;
  }
}

JavaScript Functionality

document.addEventListener('DOMContentLoaded', function() {
  const faqItems = document.querySelectorAll('.faq-item');
  
  faqItems.forEach(item => {
    const question = item.querySelector('.faq-question');
    
    question.addEventListener('click', () => {
      const isActive = item.classList.contains('active');
      
      // Close all other items
      faqItems.forEach(otherItem => {
        if (otherItem !== item) {
          otherItem.classList.remove('active');
        }
      });
      
      // Toggle current item
      if (isActive) {
        item.classList.remove('active');
      } else {
        item.classList.add('active');
      }
    });
  });
});

Implementation Guide

1. Copy the HTML structure into your project
2. Add the CSS styles to your stylesheet
3. Include the JavaScript code in your script file
4. Customize the paper colors and fold effects to match your brand
5. Add your own FAQ questions and answers

The origami style FAQ component features paper-like textures and folding animations inspired by traditional Japanese art. The design uses subtle fold patterns and creative icons to create a unique visual experience while maintaining full functionality and accessibility.