Watch this:
Add this to your stylesheet:
.schema-faq-accordion .schema-faq-section { border: 1px solid #d1dfee; margin-bottom: 20px; background-color: #fdfeff; } .schema-faq-accordion .schema-faq-question { font-size: 14px; font-weight: bold; margin: 0; padding: 17px 56px 17px 12px; line-height: 1.4; cursor: pointer; position: relative; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; display: block; } .schema-faq-accordion .schema-faq-question.faq-q-open { border-bottom: 1px solid #d1dfee; } .schema-faq-accordion .schema-faq-question:after { content: "+"; position: absolute; top: 50%; right: 0; width: 56px; text-align: center; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); font-weight: bold; color: #000; font-size: 20px; } .schema-faq-accordion .schema-faq-question.faq-q-open:after { content: "-"; } .schema-faq-accordion p.schema-faq-answer { margin: 0; padding: 12px; background-color:#fff; font-size: 16px!important; line-height: 1.4!important; border-bottom: 1px solid #dedee0; display: none; }
Add this to your javascript file:
jQuery(document).ready(function() { jQuery('.schema-faq-accordion .schema-faq-question').click(function(){ if (jQuery(this).siblings('.schema-faq-answer').is(':visible')) { jQuery(this).removeClass('faq-q-open'); jQuery(this).siblings('.schema-faq-answer').removeClass('faq-a-open').slideUp(); } else { jQuery(this).addClass('faq-q-open'); jQuery(this).siblings('.schema-faq-answer').addClass('faq-a-open').slideDown(); } }) });
Please note: This code much be added inside a document ready function.
Add this class to your Yoast FAQ block
schema-faq-accordion
Final Result:
Here’s how it’ll look and function if you followed along correctly:
Yep, just follow the steps outlined on this page and you’ll have a jQuery FAQ accordion with Schema markup on your website in no time!
Having FAQ Schema doesn’t directly improve your rankings, but it often makes your SERP listing 3 times larger than listings without schema FAQ. Having the larger SERP listing will increase your CTR, which will help your website’s SEO.
Yes. Elements of a web page don’t need to be displayed on the front end for Google to index them. And so hiding content behind an accordion won’t stop it getting indexed (thankfully)!