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

<!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">سوال ۱: چگونه می‌توانم ثبت‌نام کنم؟</div>
            <div class="faq-answer">پاسخ: برای ثبت‌نام، به صفحه ثبت‌نام مراجعه کنید و فرم را پر کنید.</div>
        </div>
        <div class="faq-item">
            <div class="faq-question">سوال ۲: چگونه می‌توانم رمز عبور خود را بازیابی کنم؟</div>
            <div class="faq-answer">پاسخ: روی گزینه "فراموشی رمز عبور" کلیک کنید و دستورالعمل‌ها را دنبال کنید.</div>
        </div>
        <div class="faq-item">
            <div class="faq-question">سوال ۳: آیا می‌توانم حساب کاربری خود را حذف کنم؟</div>
            <div class="faq-answer">پاسخ: بله، می‌توانید از بخش تنظیمات حساب کاربری خود، حساب را حذف کنید.</div>
        </div>
        <!-- سوالات بیشتر -->
    </div>
    <script src="script.js"></script>
</body>
</html>

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    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;
    color: #333;
}

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

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

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

.faq-answer {
    display: none;
    padding: 10px;
    border: 1px solid #007bff;
    border-radius: 5px;
    margin-top: 5px;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

document.querySelectorAll('.faq-question').forEach(question => {
    question.addEventListener('click', () => {
        const answer = question.nextElementSibling;

        // Toggle the display of the answer
        if (answer.style.maxHeight) {
            answer.style.maxHeight = null;
            answer.style.padding = '0';
            answer.style.display = 'none';
        } else {
            answer.style.maxHeight = answer.scrollHeight + "px";
            answer.style.padding = '10px';
            answer.style.display = 'block';
        }
    });
});

User 136 1 HTML & CSS

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Profile Layout</title>
    <link href="https://fonts.googleapis.com/css2?family=Audiowide&family=Electrolize&display=swap" rel="stylesheet">
    <style>
      #questions{
        background: #e6e9ee;
        border-radius: 10px;
        padding-bottom: 20px;
        margin: 30px;
      }
      
      #questions h1{
        font-family: "Anton", sans-serif;
        padding: 40px;
        padding-bottom: 0;
        color: #f77f00;  
      }
      
      #questions section{
        background: #ffffff;
        margin: 40px;
        overflow: hidden;
        border-radius: 20px;
        box-shadow: 2px 10px 10px #cccccc;
        transition: height 0.5s ease
      }
      
      
      #questions h4{
        margin: 0;
        padding: 20px;
        color:#264653;
        transition: color 0.5s
      }

      #questions p{
        margin: 0;
        padding: 20px;
        padding-top: 0;
        color: #606060;
      }

  </style>
</head>
<body>
  <section id="questions">
    <h1>Frequently Asked Questions</h1>

    <section onclick="showAnswer(this)">
      <h4>How can I track my order?</h4>
      <p>To track your order, log in to your account and go to the "My Orders" section. Here you can view the status of your order.</p>
    </section>
    
    <section onclick="showAnswer(this)">
      <h4>What payment methods are available in your store?	</h4>
      <p>We accept various payment methods including credit and debit cards, online payment, and cash on delivery.</p>
    </section>
    
    <section onclick="showAnswer(this)">
      <h4>Can I cancel my order?</h4>
      <p>Yes, you can cancel your order as long as it has not been shipped. To cancel, go to the "My Orders" section in your account and select the cancel option.</p>
    </section>
    
    <section onclick="showAnswer(this)">
      <h4>How can I return a product?</h4>
      <p>To return a product, log in to your account and request a return. We will send you instructions on how to return the product.</p>
    </section>
    
    <section onclick="showAnswer(this)">
      <h4>What is the delivery time for orders?</h4>
      <p>The delivery time for orders is usually between 3 to 7 business days. You can track the exact delivery status from the "My Orders" section.</p>
    
    </section>
  </section>
<script>
  let section=document.querySelectorAll("#questions section")
  
  section.forEach(element => {
    let h4 = element.querySelector("h4")
    element.style.height=`${h4.scrollHeight}px`}
  )
  
  function showAnswer(element){
    let h4 = element.querySelector("h4")
    let p = element.querySelector("p")
    
    if(element.style.height==`${h4.scrollHeight}px`){
      element.style.height = `${h4.scrollHeight + p.scrollHeight}px`;
      element.style.borderWidth = "3px 3px";
      element.style.borderStyle = "solid dashed";
      element.style.borderColor = "#2a9d8f"
      h4.style.color = "#2a9d8f" 
    }
    else{
      element.style.height=`${h4.scrollHeight}px`

      element.style.border ="none" 
      h4.style.color = "#264653"
    }
  }
</script>
</body>
</html>

Unun..ali..nunu U JavaScript HTML & CSS

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Frequently Asked Questions</title>
    <!--                    این کد اصلاح شده کد اول میباشد
    در کد اول وقتی بعد از لود سایت اندازه صفحه مرور گر را تغییر میدادیم
                 ارتفاع بخش سوالات تغییر نمیکرد وباعث خراب شدن کل کد میشد        -->
    <link href="https://fonts.googleapis.com/css2?family=Audiowide&family=Electrolize&display=swap" rel="stylesheet">
 
    <style>
      /* ---------------------------------------------------------------------------- */
      section{
        background: #e6e9ee;
        border-radius: 10px;
        padding-bottom: 20px;
        margin: 30px;
        }

      section h1{
        font-family: "Anton", sans-serif;
        padding: 40px;
        padding-bottom: 0;
        color: #f77f00;  
        }
      /* ---------------------------------------------------------------------------- */
      .close , .open{
        background: #ffffff;
        margin: 40px;
        overflow: hidden;
        border-radius: 20px;
        box-shadow: 2px 10px 10px #cccccc;
        }
      .open{
        border-width: 3px 3px ;
        border-style: solid dashed;
        border-color: #2a9d8f;
        }
      /* ----------------------- */
      .close h4 , .open h4{
        margin: 0;
        padding: 20px;
        transition: color 0.5s ease;
        }
      .close h4{
        color:#264653;}
      .open h4{
        color:#2a9d8f;}
      /* ----------------------- */
      .open p , .close p{
          margin: 0;
          padding-left: 20px;
          color: #606060;
          transition: height 0.5s ease;
          }
       .close p{
          height: 0 !important;}
      /* ----------------------- */
  </style>
</head>

<body>
  <section>
    <h1>Frequently Asked Questions</h1>
 
    <div class="close" onclick="showAnswer(this)">
      <h4>How can I track my order?</h4>
      <p>To track your order, log brin to your account and go to the "My Orders" div. Here you can view the status of your order.</p>
    </div>
    
    <div class="close" onclick="showAnswer(this)">
      <h4>What payment methods are available in your store?	</h4>
      <p>We accept various payment methods including credit and debit cards, online payment, and cash on delivery.</p>
    </div>
    
    <div class="close" onclick="showAnswer(this)">
      <h4>Can I cancel my order?</h4>
      <p>Yes, you can cancel your order as long as it has not been shipped. To cancel, go to the "My Orders" div in your account and select the cancel option.</p>
    </div>
    
    <div class="close" onclick="showAnswer(this)">
      <h4>How can I return a product?</h4>
      <p>To return a product, log in to your account and request a return. We will send you instructions on how to return the product.</p>
    </div>
    
    <div class="close" onclick="showAnswer(this)">
      <h4>What is the delivery time for orders?</h4>
      <p>The delivery time for orders is usually between 3 to 7 business days. You can track the exact delivery status from the "My Orders" div.</p>
    </div>
  </section>
<script>   
  function showAnswer(element){
    let p = element.querySelector("p")
    if(element.classList.contains("close")){
        let height = p.scrollHeight + 20 + "px"; 
        p.style.height = height;
        element.classList.remove("close");
        element.classList.add("open")}
    else{
        element.classList.remove("open")
        element.classList.add("close")}
  }
</script>
</body>
</html>

Unun..ali..nunu U JavaScript HTML & CSS

<!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