Setup Faq in the website post

FAQ

FAQ (Frequently Asked Questions) என்றால், அடிக்கடி கேட்கப்படும் கேள்விகள் என்று பொருள். இது ஒரு குறிப்பிட்ட பொருள் அல்லது சேவையைப் பற்றிய முக்கியமான கேள்விகள் மற்றும் அவற்றின் பதில்களை வழங்கும் ஒரு பகுதியில் இடம் பெறுகிறது.

இது பயனர்களின் சந்தேகங்களைத் தீர்க்கவும், தேவையான தகவல்களை எளிதில் அறியவும் உதவுகிறது. FAQ பகுதி, குறிப்பாக இணையதளங்களில் அல்லது சேவைகளில், பயனர்களின் நேரத்தை மிச்சப்படுத்தும் ஒரு சிறந்த வழி.

code for use

CSS Code

.faq-section {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    max-width: 600px;
    margin: 0 auto;
}

h2 {
    text-align: center;
    color: #333;
}

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

.faq-question {
    cursor: pointer;
    background-color: #007BFF;
    color: white;
    padding: 10px;
    border-radius: 5px;
    margin: 0;
}

.faq-answer {
    display: none;
    padding: 10px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 5px;
}
 

HTML

<div class="faq-section">
        <h2>Frequently Asked Questions</h2>
        
        <div class="faq-item">
            <h3 class="faq-question">Questions 1</h3>
            <div class="faq-answer">
                <p>Answer </p>
            </div>
        </div>

        <div class="faq-item">
            <h3 class="faq-question">Questions </h3>
            <div class="faq-answer">
                <p>Answer </p>
            </div>
        </div>

        <div class="faq-item">
            <h3 class="faq-question">Questions 3</h3>
            <div class="faq-answer">
                <p>Answer</p>
            </div>
        </div>

    </div>
 

Script

document.addEventListener('DOMContentLoaded', function() {
    const questions = document.querySelectorAll('.faq-question');

    questions.forEach(function(question) {
        question.addEventListener('click', function() {
            const answer = this.nextElementSibling;

            if (answer.style.display === 'block') {
                answer.style.display = 'none';
            } else {
                answer.style.display = 'block';
            }
        });
    });
});
 

Preview Code 👇

Frequently Asked Questions

What is your return policy?

Our return policy allows returns within 30 days of purchase with a valid receipt.

How do I track my order?

You can track your order using the tracking number provided in your email confirmation.

Do you offer international shipping?

Yes, we offer international shipping to most countries. Shipping fees vary based on location.