Skip to content

Instantly share code, notes, and snippets.

@freddielore
Last active March 23, 2022 16:53
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save freddielore/02715f126e4953aab3f2e61373f9cd23 to your computer and use it in GitHub Desktop.
Save freddielore/02715f126e4953aab3f2e61373f9cd23 to your computer and use it in GitHub Desktop.
[Yoast SEO FAQ] Add collapsible headers support to Yoast SEO FAQ schema
/* Accordion
------------------------------------------------------------ */
.schema-faq-question{
cursor: pointer;
}
.schema-faq-question:before{
width: 16px;
height: 20px;
display: inline-block;
content: "+";
margin-right: 5px;
vertical-align: top;
}
.schema-faq-question.collapse:before{
content: "-";
}
.schema-faq-question:hover{
opacity: 0.8;
}
.schema-faq-answer{
display: none;
padding-left: 1em;
}
.schema-faq-answer.default{
display: block;
}
jQuery(document).ready(function($){
var yoast = {
accordion: function(){
$('.wp-block-yoast-faq-block').find('.schema-faq-question').click(function(){
//Expand or collapse this panel
$(this).nextAll('.schema-faq-answer').eq(0).slideToggle('fast', function(){
if( $(this).hasClass('collapse') ){
$(this).removeClass('collapse');
}
else{
$(this).addClass('collapse');
}
});
//Hide the other panels
$(".schema-faq-answer").not( $(this).nextAll('.schema-faq-answer').eq(0) ).slideUp('fast');
});
$('.wp-block-yoast-faq-block .schema-faq-question').click(function(){
$('.wp-block-yoast-faq-block .schema-faq-question').not( $(this) ).removeClass('collapse');
if( $(this).hasClass('collapse') ){
$(this).removeClass('collapse');
}
else{
$(this).addClass('collapse');
}
});
}
};
yoast.accordion();
});
@ianpegg
Copy link

ianpegg commented Jan 21, 2021

When integrating this code with a Bootstrap v3 project the use of the .collapse class conflicts with Bootstrap. BS ships with .collapse set to display:none in the CSS, which causes the title (question) to be hidden on click. Other versions of Bootstrap might be affected too although I haven't tested those.

I fixed this issue by renaming the 'collapse' class to 'expanded', in both the JS and CSS above. Personally, I find that label more intuitive too as I instantly know whether the accordion is expanded or not based upon the presence of this self-explanatory class.

Otherwise, this works a treat. Thank you, @freddielore.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment