body { font-family: 'Tajawal', sans-serif; background-color: #f4f6f9; margin: 0; padding: 20px; direction: rtl; } h1 { text-align: center; color: #0c3c60; } .container { display: flex; } .categories { width: 20%; margin-right: 20px; } .categories ul { list-style-type: none; padding: 0; } .categories li { background-color: #0c6052; color: white; padding: 10px; margin-bottom: 10px; cursor: pointer; text-align: center; border-radius: 5px; transition: background-color 0.3s ease; } .categories li.active { background-color: #ff6600; /* لون برتقالي عند التفعيل */ color: white; font-weight: bold; } .faq-container { width: 80%; } .accordion { background-color: #ffffff; border: 1px solid #e3e3e3; border-radius: 8px; margin: 10px 0; padding: 15px; cursor: pointer; transition: background-color 0.3s ease, box-shadow 0.3s ease; font-weight: bold; color: #0c3c60; } .accordion.active { background-color: #0c3c60; color: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .panel { padding: 0 15px; display: none; background-color: #f4f6f9; border-top: 1px solid #e3e3e3; overflow: hidden; } input[type="text"] { width: 100%; padding: 12px; margin-bottom: 20px; font-size: 16px; border: 1px solid #ccc; border-radius: 5px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } .panel p { margin: 10px 0; color: #333; } .highlight { background-color: yellow; color: black; } .accordion:hover { background-color: #0c3c60; color: #fff; }

الأسئلة الشائعة

var acc = document.getElementsByClassName("accordion"); var currentCategory = 'all'; // Store the current selected category // Accordion functionality for (var i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function() { this.classList.toggle("active"); var panel = this.nextElementSibling; if (panel.style.display === "block") { panel.style.display = "none"; panel.style.maxHeight = null; } else { panel.style.display = "block"; panel.style.maxHeight = panel.scrollHeight + "px"; } }); } // Filter questions by category function filterCategory(category) { currentCategory = category; // Set the current category var acc = document.getElementsByClassName("accordion"); var categories = document.querySelectorAll(".categories li"); // Remove 'active' class from all category items categories.forEach(function(item) { item.classList.remove("active"); }); // Add 'active' class to the selected category item var selectedCategory = Array.from(categories).find(function(item) { return item.textContent.trim() === category; }); if (selectedCategory) { selectedCategory.classList.add("active"); } // Filter accordion items based on category Array.from(acc).forEach(function(item) { var panel = item.nextElementSibling; if (item.getAttribute('data-category') === category || category === 'all') { item.style.display = ""; panel.style.display = "none"; // Hide panels initially item.classList.remove("active"); } else { item.style.display = "none"; panel.style.display = "none"; } }); filterQuestions(); // Reapply the search filter after filtering by category } // Search filter functionality function filterQuestions() { var input, filter, acc, panel, i, txtValue, txtPanel; input = document.getElementById("searchInput"); filter = input.value.toLowerCase(); acc = document.getElementsByClassName("accordion"); for (i = 0; i -1 || txtPanel.toLowerCase().indexOf(filter) > -1; if (matchFound && (currentCategory === 'all' || acc[i].getAttribute('data-category') === currentCategory)) { acc[i].style.display = ""; panel.style.display = "block"; // Highlight matching words in accordion title acc[i].innerHTML = txtValue.replace(new RegExp(filter, 'gi'), function(match) { return `${match}`; }); // Highlight matching words in panel content panel.innerHTML = txtPanel.replace(new RegExp(filter, 'gi'), function(match) { return `${match}`; }); // Open the panel if it contains the searched text panel.style.maxHeight = panel.scrollHeight + "px"; } else { acc[i].style.display = "none"; panel.style.display = "none"; } } }