الگو:پرسش و پاسخ: تفاوت میان نسخه‌ها

از ویکی تریدر | اولین دانشنامه تخصصی بازارهای مالی فارکس و ارز دیجیتال
→ تفاوت با ویرایش قدیمی‌تر
دیداریویکی‌متن
بدون خلاصۀ ویرایش
بدون خلاصۀ ویرایش
 
خط ۱: خط ۱:
<html lang="fa">
<head>
<head>
<meta charset="UTF-8">
    <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>پرسش و پاسخ ساده جمع شونده</title>
    <title>سوالات متداول</title>
<style>
    <style>
/* استایل‌های ساده برای بخش پرسش و پاسخ */
        @import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;700&display=swap');
.faq-item {
       
margin-bottom: 10px;
        /* استایل اختصاصی این صفحه */
border: 1px solid #ddd;
        .faq-page {
border-radius: 5px;
            font-family: 'Vazirmatn', sans-serif;
overflow: hidden;
            direction: rtl;
}
            background-color: #1d2b53;
            margin: 0;
            padding: 20px;
            box-sizing: border-box;
        }


.faq-question {
        .faq-header {
padding: 10px;
            text-align: center;
background-color: #3C4868;
            font-size: 36px;
color: white;
            color: #1d2b53;
cursor: pointer;
            margin-bottom: 30px;
font-weight: bold;
            text-shadow: 0 0 10px #42eb9c, 0 0 20px #42eb9c, 0 0 30px #36c486;
}
        }


.faq-answer {
        .faq-container {
display: none;
            background: #2c3e50;
padding: 10px;
            border-radius: 8px;
back ground-color: #1abc9c;
            margin: 10px auto;
color: #333;
            padding: 10px 20px;
}
            width: 100%;
</style>
            transition: all 0.3s ease;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
            box-sizing: border-box;
        }
 
        .faq-container:hover {
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
            transform: translateY(-3px);
        }
 
        .faq-question {
            display: flex;
            align-items: center;
            font-size: 18px;
            font-weight: bold;
            color: #42eb9c;
            cursor: pointer;
        }
 
        .faq-icon {
            margin-left: 20px;
            font-size: 20px;
            color: #42eb9c;
            transition: transform 0.3s ease;
        }
 
        .faq-container.active .faq-icon {
            transform: rotate(180deg);
        }
 
        .faq-answer {
            font-size: 16px;
            line-height: 1.6;
            color: #ddd;
            overflow: hidden;
            max-height: 0;
            opacity: 0;
            transition: max-height 0.5s ease, opacity 0.5s ease;
        }
 
        .faq-container.active .faq-answer {
            max-height: 500px;
            opacity: 1;
            margin-top: 10px;
        }
    </style>
</head>
</head>
<body>
<body class="faq-page">
    <!-- عنوان صفحه -->
    <h2 class="faq-header">سوالات متداول</h2>
 
    <!-- اینجا سوالات و جواب‌ها به‌طور خودکار نمایش داده می‌شوند -->
    <div id="faq-section"></div>
 
    <!-- مکان نوشتن سوالات و جواب‌ها -->
    <script id="faq-data" type="text/plain">
        [
            {"question": "فارکس چیست؟", "answer": "فارکس بازاری برای تبادل ارزهای خارجی است که در آن می‌توانید به خرید و فروش ارزها و کسب سود از نوسانات قیمتی بپردازید."},
            {"question": "آیا فارکس قانونی است؟", "answer": "در برخی کشورها فارکس قانونی و تحت نظارت سازمان‌های مالی است؛ اما در برخی کشورها ممکن است محدودیت‌هایی وجود داشته باشد."},
            {"question": "چگونه در فارکس معامله کنیم؟", "answer": "برای شروع معامله در فارکس نیاز به افتتاح حساب در یک بروکر معتبر و یادگیری اصول اولیه معامله‌گری دارید."},
            {"question": "چه بروکری مناسب است؟", "answer": "بروکرهایی که رگولاتوری معتبر دارند و اسپرد کمتری ارائه می‌دهند مناسب‌تر هستند."},
            {"question": "مدیریت ریسک چیست؟", "answer": "مدیریت ریسک شامل تنظیم حد ضرر، استفاده از حجم مناسب معاملات و دوری از هیجان‌زدگی در معاملات است."}
        ]
    </script>
 
    <!-- جاوااسکریپت -->
    <script>
        // خواندن سوالات و جواب‌ها از اسکریپت پایین
        const faqDataText = document.getElementById('faq-data').textContent;
        const faqData = JSON.parse(faqDataText.trim());
 
        // مکان قرارگیری سوالات
        const faqSection = document.getElementById("faq-section");
 
        // تولید خودکار باکس سوال و جواب
        faqData.forEach(item => {
            // باکس اصلی
            const faqContainer = document.createElement("div");
            faqContainer.className = "faq-container";
 
            // بخش سوال
            const questionDiv = document.createElement("div");
            questionDiv.className = "faq-question";
            questionDiv.onclick = () => toggleFAQ(faqContainer);
 
            const iconSpan = document.createElement("span");
            iconSpan.className = "faq-icon";
            iconSpan.textContent = "+";
 
            const textSpan = document.createElement("span");
            textSpan.textContent = item.question;
 
            questionDiv.appendChild(iconSpan);
            questionDiv.appendChild(textSpan);
 
            // بخش جواب
            const answerDiv = document.createElement("div");
            answerDiv.className = "faq-answer";
            answerDiv.textContent = item.answer;
 
            // اضافه کردن به باکس اصلی
            faqContainer.appendChild(questionDiv);
            faqContainer.appendChild(answerDiv);
 
            // اضافه به بخش اصلی
            faqSection.appendChild(faqContainer);
        });


<div class="faq-item">
        // باز و بسته کردن سوالات
<div class="faq-question" onclick="toggleAnswer(this)">{{{1|سوال ۱}}}</div>
        function toggleFAQ(container) {
<div class="faq-answer">{{{2|پاسخ ۱}}}</div>
            container.classList.toggle("active");
</div>
            const icon = container.querySelector(".faq-icon");
{{#if: {{{3|}}}|
            icon.textContent = icon.textContent === "+" ? "-" : "+";
<div class="faq-item">
        }
<div class="faq-question" onclick="toggleAnswer(this)">{{{3|}}}</div>
    </script>
<div class="faq-answer">{{{4|}}}</div>
</body>
</div>
</html>
{{#if: {{{5|}}}|
<div class="faq-item">
<div class="faq-question" onclick="toggleAnswer(this)">{{{5|}}}</div>
<div class="faq-answer">{{{6|}}}</div>
</div>
{{#if: {{{7|}}}|
<div class="faq-item">
<div class="faq-question" onclick="toggleAnswer(this)">{{{7|}}}</div>
<div class="faq-answer">{{{8|}}}</div>
</div>
{{#if: {{{9|}}}|
<div class="faq-item">
<div class="faq-question" onclick="toggleAnswer(this)">{{{9|}}}</div>
<div class="faq-answer">{{{10|}}}</div>
</div>
<script>
function toggleAnswer(element) {
const answer = element.nextElementSibling;
answer.style.display = (answer.style.display === "block") ? "none" : "block";
}
</script>

نسخهٔ کنونی تا ‏۱۷ دسامبر ۲۰۲۴، ساعت ۱۲:۵۹

سوالات متداول

سوالات متداول

برگرفته از «https://wiki.ostadganji.ir/index.php?title=الگو:پرسش_و_پاسخ&oldid=2299»