របៀប​ដាក់​សំណួរ​សួរញឹកញាប់ - FAQs

សួស្ដី!បាទ ខាន​ជួប​គ្នា​រៀងយូរ​ដែរ​ហើយ ថ្ងៃនេះ​ខ្ញុំ​សូម​លើក​យក​របៀប​ក្នុង​ការ​ដាក់​សំណួរ​សួរ​ញឹកញាប់ ដែល​ភាសា​អង់គ្លេស​ហៅថា Frequently Asked Questions (FAQs)។ FAQs នេះ​ដែរ​ជាទូទៅ​គេ​ប្រើ​សម្រាប់​ដាក់​ជា​សំណួរ​ចម្លើយ​អោយ​បាន​ដឹង​ពី​ផលិតផល​ឬ​សេវាកម្ម​ផ្សេងៗ​របស់​ពួក​គេ​ទៅ​ដល់​អ្នក​ប្រើប្រាស់។

១.ចូល​ទៅកាន់ Theme => Edit HTML រួច​ចម្លង​កូដ​ខាងក្រោម​ដាក់​ពី​ខាងលើ </head>

<style type="text/css">
#faqs{display:grid;grid-template-columns:1fr;gap:20px}
.faq-item{border:1px solid rgba(155,155,155,0.19);border-radius:3px}
.faq-item h3.faq-question{display:flex;justify-content:space-between;gap:15px;font-size:15px;font-weight:500;cursor:pointer;padding:15px;margin:0;transition:all .17s ease}
.faq-item h3.faq-question::after{content:'+'}
.faq-item.active h3.faq-question::after{content:'-'}
.faq-item h3:hover,.faq-item.active h3{color:#ff0000}
.faq-content{display:none;padding:15px;border-top:1px solid rgba(155,155,155,0.19)}
.faq-content p.faq-answer{margin:0}
</style>

២.ចម្លង​កូដ​ខាងក្រោម​ដាក់​ពី​ខាងលើ </body> បន្ទាប់​មក​ចុច Icon Save រួច​ចាកចេញ​ពី​ផ្ទាំង Edit HTML

<script type="text/javascript">
$('#faqs').each(function () {
    let $this = $(this),
        renderFaq = "";
    faqLists.forEach((faq, index) => {
        renderFaq += '<div class="faq-item item-' + (index + 1) + '">';
        renderFaq += '<h3 class="faq-question" data-question="' + (index + 1) + '">' + faq.question + '</h3>';
        renderFaq += '<div class="faq-content">';
        renderFaq += '<p class="faq-answer" data-answer="' + (index + 1) + '">' + faq.answer + '</p>';
        renderFaq += '</div></div>';
    });
    $this.html(renderFaq);
    $('.faq-question').on('click', function () {
        let $this = $(this).parent(),
            $next = $(this).next();
        if ($this.hasClass('active')) {
            $next.slideUp();
            $this.removeClass('active');
        } else {
            $('.faq-content').slideUp();
            $('.faq-item').removeClass('active');
            $this.addClass('active');
            $next.slideDown();
        }
    })
});
</script>

៣.ចម្លង​កូដ​ខាងក្រោម​ដាក់​ក្នុង Blog Page ដោយ​ប្ដូរ​ទៅជា HTML view

<div id="faqs"></div>
<script>
let faqLists = [{
        question: "១.សំណួរ ទី១",
        answer: "ចម្លើយ ទី១"
    },
    {
        question: "២.សំណួរ ទី២",
        answer: "ចម្លើយ ទី២"
    },
];
</script>

៤.កែប្រែ ឫ បន្ថែម​ព័ត៌មាន​សំណួរ និង ចម្លើយ ខាងលើ​រួច​ចុច​ពាក្យ Publish ជា​ការ​ស្រេច៕