HTML
<div itemscope itemtype="https://schema.org/FAQPage" class="faqlistitem"> <div itemscope itemprop="mainEntity" itemtype="https://schema.org/Question"> <h3 itemprop="name" itemtype="https://schema.org/Question" class="faqtitleh3">問題?</h3> <div itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer" class="faqansp"> <div itemprop="text"><p> 答案內容。 </p></div></div></div> </div>
CSS
#faqlistitem { margin-bottom: 1em; margin-top: 1em; } .faqtitleh3 { cursor: pointer; position: relative; display: block; padding-right: 1em; margin-right: 1em; font-weight: 300; margin-top: 30px; } .faqtitleh3:after { position: absolute; right: 5px; top: 0; content: "\2715"; transform: rotate(-45deg); transition: all 150ms ease-in-out; } .faqtitleh3.collapse:after { transform: rotate(0deg); } .faqtitleh3:hover { opacity: 0.8; }
JS
(function($){ var acornfaq = { accordion: function () { $(‘.faqlistitem').find('.faqansp').hide(); $('.faqlistitem').find('.faqtitleh3').click(function () { //Expand or collapse this panel $(this).nextAll('.faqansp').eq(0).slideToggle('fast', function () { if ($(this).hasClass('collapse')) { $(this).removeClass('collapse'); } else { $(this).addClass('collapse'); } }); //Hide the other panels $(".faqansp").not($(this).nextAll('.faqansp').eq(0)).slideUp('fast'); }); $(‘.faqlistitem .faqtitleh3').click(function () { $('.faqlistitem .faqtitleh3').not($(this)).removeClass('collapse'); if ($(this).hasClass('collapse')) { $(this).removeClass('collapse'); } else { $(this).addClass('collapse'); } }); } }; acornfaq.accordion(); })(jQuery);