CodeSolved

A comprehensive source of programming questions and exercises

Frequently asked questions

Practice Easy 213/ Download 374 Views

Design a page for conventional questions using HTML, CSS and JavaScript

On this page you need to display the usual questions and when the user clicks on each question, the answer to that question is exactly the question with an animation (slider)

4 Answers

<!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 Download 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 Download JavaScript HTML & CSS

First code Unun..ali..nunu 

<!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 Download JavaScript HTML & CSS

The second code. This modified code is the first code. In the first code, when we changed the size of the browser after the site loaded, the height of the questions did not change and the whole code was damaged. Unun..ali..nunu 

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

    # Checking whether the answer is currently displayed
    if (answerElement.style.maxHeight) {
        # If the reply displayed, hide it
        answerElement.style.maxHeight = null;
    } else {
        # If the answer is hidden, show it
        answerElement.style.maxHeight = answerElement.scrollHeight + "px";
    }
}
Mma123 Download JavaScript HTML & CSS

Submit answer

Submitting answers is currently unavailable.

Related content

Detection using AI
×

حساب کاربری

برای استفاده از این بخش باید وارد حساب کاربریت بشی

ورود/ثبت نام
×

I can't solve this exercise 😞

If you don’t understand the exercise or can’t solve it for any reason, that’s completely normal—don’t worry 😊
Try checking out easier exercises and reviewing different answers submitted by others. Gradually, you can move on to more challenging exercises. Also, your answer might be correct even if it’s different from others.

Close