10 Best jQuery Projects

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>FAQ Accordion</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    body { font-family: Arial, sans-serif; max-width: 600px; margin: 50px auto; }
    .faq-item { border: 1px solid #ddd; margin-bottom: 10px; border-radius: 5px; }
    .faq-question { background: #f4f4f4; padding: 15px; cursor: pointer; font-weight: bold; }
    .faq-question:hover { background: #e0e0e0; }
    .faq-answer { padding: 15px; display: none; background: #fff; border-top: 1px solid #ddd; }
    .faq-question.active { background: #4CAF50; color: white; }
  </style>
</head>
<body>
  <h1>Frequently Asked Questions</h1>
  
  <div class="faq-container">
    <div class="faq-item">
      <div class="faq-question">What is jQuery?</div>
      <div class="faq-answer">jQuery is a fast, small, and feature-rich JavaScript library that simplifies HTML document traversal, event handling, and AJAX.</div>
    </div>
    <div class="faq-item">
      <div class="faq-question">How do I install jQuery?</div>
      <div class="faq-answer">You can include jQuery via a CDN link in your HTML file or download it and host it locally.</div>
    </div>
    <div class="faq-item">
      <div class="faq-question">Is jQuery still relevant in 2024?</div>
      <div class="faq-answer">While modern frameworks have gained popularity, jQuery is still widely used in legacy projects and for quick DOM manipulation tasks.</div>
    </div>
  </div>

  <script>
    $(document).ready(function() {
      // Event handler for clicking FAQ questions
      $('.faq-question').on('click', function() {
        // Get the answer element (next sibling)
        var answer = $(this).next('.faq-answer');
        
        // Close other open answers
        $('.faq-answer').not(answer).slideUp(300);
        $('.faq-question').not(this).removeClass('active');
        
        // Toggle current answer with smooth animation
        answer.slideToggle(300);
        $(this).toggleClass('active');
      });
    });
  </script>
</body>
</html>