با استفاده از html و css و جاوا اسکریپت صفحه ای مربوط به سوالات متداول طراحی کنید در این صفحه باید سوالات متداول نمایش داده شود و وقتی کاربر روی هر سوال کلیک کرد، پاسخ مربوط به آن سوال دقیقا زیر سوال با یک انیمیشن (کشویی) نمایش داده شود

تمرین سوالات متداول +جواب

1 جواب

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>سوالات متداول</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>سوالات متداول</h1>
        <div class="faq-item">
            <div class="faq-question" onclick="toggleAnswer(this)">
                سوال ۱: چگونه می‌توانم ثبت‌نام کنم؟
            </div>
            <div class="faq-answer">
                برای ثبت‌نام، کافیست به صفحه ثبت‌نام مراجعه کنید و فرم را پر کنید.
            </div>
        </div>
        <div class="faq-item">
            <div class="faq-question" onclick="toggleAnswer(this)">
                سوال ۲: چگونه می‌توانم رمز عبور خود را بازیابی کنم؟
            </div>
            <div class="faq-answer">
                برای بازیابی رمز عبور، به صفحه ورود مراجعه کنید و گزینه "بازیابی رمز عبور" را انتخاب کنید.
            </div>
        </div>
        <div class="faq-item">
            <div class="faq-question" onclick="toggleAnswer(this)">
                سوال ۳: آیا امکان تغییر اطلاعات حساب وجود دارد؟
            </div>
            <div class="faq-answer">
                بله، شما می‌توانید با ورود به حساب کاربری خود، اطلاعات خود را تغییر دهید.
            </div>
        </div>
        <!-- سوالات بیشتر می‌توانند در اینجا اضافه شوند -->
    </div>
    <script src="script.js"></script>
</body>
</html>
CSS (styles.css)
css
body {
    font-family: Arial, sans-serif;
    background-color: #f9f9f9;
    margin: 0;
    padding: 20px;
}

.container {
    max-width: 600px;
    margin: auto;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
}

h1 {
    text-align: center;
    margin-bottom: 20px;
}

.faq-item {
    margin-bottom: 10px;
}

.faq-question {
    background-color: #007BFF;
    color: white;
    padding: 15px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.faq-question:hover {
    background-color: #0056b3;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    background-color: #f1f1f1;
    padding: 0 15px;
    border-radius: 0 0 5px 5px;
    margin-top: 5px;
}

JavaScript (script.js)
javascript
function toggleAnswer(questionElement) {
    const answerElement = questionElement.nextElementSibling;

    // بررسی اینکه آیا پاسخ فعلاً نمایش داده شده است یا خیر
    if (answerElement.style.maxHeight) {
        // اگر پاسخ نمایش داده شده، آن را مخفی کن
        answerElement.style.maxHeight = null;
    } else {
        // اگر پاسخ مخفی است، آن را نمایش بده
        answerElement.style.maxHeight = answerElement.scrollHeight + "px";
    }
}

Mma123

M

دانلود

JavaScript

HTML & CSS

نظرتو راجب این جواب بنویس...

ارسال جواب

# کداتو توی این بخش بنویس
# فرقی نمیکنه چه زبان برنامه نویسی باشه، همرو پشتیبانی میکنیم :)
# البته قبلش این سه خط رو پاک کن

لطفا جواب های تکراری ارسال نکن
قبل از ارسال، جوابت رو داخل یک کد ادیتور مثل vscode بنویس و بعد اینجا Paste کن
جواب های ارسالی، پس از بررسی کوتاهی، ویرایش میشن و در سایت نمایش داده میشن
ارسال جواب حق مادی یا معنوی برای ارسال کننده ایجاد نمیکند و تمام حقوق برای سایت کدبزن محفوظ است

تمرین برنامه نویسی؛ با کدبزن!

منبع جامع سوالات و تمرینات برنامه نویسی

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

1 جواب

ارسال جواب

تمرینات مرتبط

تشخیص با استفاده از هوش مصنوعی

محاسبه مساحت مستطیل

اختلاف 2 تاریخ

لیست امتیازات دانش آموزان

فیبوناچی

محاسبه تخفیف

ماشین حساب گرافیکی حرفه ای

کلاس مکعب مستطیل

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

1 جواب

ارسال جواب

تمرینات مرتبط

تشخیص با استفاده از هوش مصنوعی

محاسبه مساحت مستطیل

اختلاف 2 تاریخ

لیست امتیازات دانش آموزان

فیبوناچی

محاسبه تخفیف

ماشین حساب گرافیکی حرفه ای

کلاس مکعب مستطیل

حساب کاربری

نمیتونم این تمرین رو حل کنم 😞