كود منزوع الاسئلة والاجوبة بالانجليزية

 

ادمج الاسئلة مع هذا الكود

<style>
.faq-container {
  max-width: 800px;
  margin: 40px auto;
  font-family: Arial, sans-serif;
  direction: ltr; 
  text-align: left; 
}
.faq-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}
.faq-item {
  margin-bottom: 15px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
  overflow: hidden;
}
.faq-question {
  width: 100%;
  background: #f0f0f0;
  border: none;
  outline: none;
  padding: 15px;
  font-size: 16px;
  font-weight: bold; /* Make the question bold */
  text-align: left; 
  cursor: pointer;
  position: relative;
  transition: background 0.3s ease;
}
.faq-question::after {
  content: "";
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  border-right: 2px solid #333;
  border-bottom: 2px solid #333;
  transition: transform 0.3s ease;
}
.faq-question.active::after {
  transform: translateY(-50%) rotate(135deg);
}
.faq-answer {
  max-height: 0;
  padding: 0 15px;
  overflow: hidden;
  background: #fff;
  font-weight: normal; /* Normal text for answers */
  transition: max-height 0.4s ease, padding 0.3s ease;
}
.faq-answer.open {
  padding: 15px;
  max-height: 500px;
}
</style>

<div class="faq-container">
  <div class="faq-title">FAQ</div>

  <!-- Add your questions below -->
  <!--
  <div class="faq-item">
    <button class="faq-question">Your question here</button>
    <div class="faq-answer">Your answer here</div>
  </div>
  -->
</div>

<script>
document.querySelectorAll('.faq-question').forEach((btn, idx) => {
  btn.addEventListener('click', function () {
    const answer = this.nextElementSibling;
    const isOpen = answer.classList.contains('open');

    document.querySelectorAll('.faq-answer').forEach(a => a.classList.remove('open'));
    document.querySelectorAll('.faq-question').forEach(q => q.classList.remove('active'));

    if (!isOpen) {
      answer.classList.add('open');
      this.classList.add('active');
    }
  });

  if (idx === 0) {
    btn.classList.add('active');
    btn.nextElementSibling.classList.add('open');
  }
});
</script>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    /* You can add your FAQ questions in JSON format here later */
  ]
}
</script>