RankMath SEO: FAQ block with collapsible headers aka an accordion, see full blog post: https://silvanhagen.com/writing/rankmath-faq-block-accordion/
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// | |
// This version hides all answers by default. | |
// | |
(function ($) { | |
var rankMath = { | |
accordion: function () { | |
$('.rank-math-block').find('.rank-math-answer').hide(); // hides all answers by default | |
$('.rank-math-block').find('.rank-math-question').click(function () { | |
//Expand or collapse this panel | |
$(this).nextAll('.rank-math-answer').eq(0).slideToggle('fast', function () { | |
if ($(this).hasClass('collapse')) { | |
$(this).removeClass('collapse'); | |
} | |
else { | |
$(this).addClass('collapse'); | |
} | |
}); | |
//Hide the other panels | |
$(".rank-math-answer").not($(this).nextAll('.rank-math-answer').eq(0)).slideUp('fast'); | |
}); | |
$('.rank-math-block .rank-math-question').click(function () { | |
$('.rank-math-block .rank-math-question').not($(this)).removeClass('collapse'); | |
if ($(this).hasClass('collapse')) { | |
$(this).removeClass('collapse'); | |
} | |
else { | |
$(this).addClass('collapse'); | |
} | |
}); | |
} | |
}; | |
rankMath.accordion(); | |
})(jQuery); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// | |
// This version shows the first answer by default. | |
// | |
(function ($) { | |
var rankMath = { | |
accordion: function () { | |
$(".rank-math-block").find(".rank-math-answer:not(:first)").hide(); // shows the first answer by default | |
$(".rank-math-block .rank-math-question:first").addClass("collapse"); // adds the proper class for the toggle | |
$(".rank-math-block") | |
.find(".rank-math-question") | |
.click(function () { | |
//Expand or collapse this panel | |
$(this) | |
.nextAll(".rank-math-answer") | |
.eq(0) | |
.slideToggle("fast", function () { | |
if ($(this).hasClass("collapse")) { | |
$(this).removeClass("collapse"); | |
} else { | |
$(this).addClass("collapse"); | |
} | |
}); | |
//Hide the other panels | |
$(".rank-math-answer") | |
.not($(this).nextAll(".rank-math-answer").eq(0)) | |
.slideUp("fast"); | |
}); | |
$(".rank-math-block .rank-math-question").click(function () { | |
$(".rank-math-block .rank-math-question") | |
.not($(this)) | |
.removeClass("collapse"); | |
if ($(this).hasClass("collapse")) { | |
$(this).removeClass("collapse"); | |
} else { | |
$(this).addClass("collapse"); | |
} | |
}); | |
} | |
}; | |
rankMath.accordion(); | |
})(jQuery); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
#rank-math-faq .rank-math-list-item { | |
margin-bottom: 1em; | |
margin-top: 1em; | |
border-bottom: 1px solid #fff; | |
} | |
.rank-math-question { | |
cursor: pointer; | |
position: relative; | |
display: block; | |
padding-right: 1em; | |
margin-right: 1em; | |
font-weight: 300; | |
margin-top: 30px; | |
} | |
.rank-math-question:after { | |
position: absolute; | |
right: 5px; | |
top: 0; | |
content: "\2715"; | |
transform: rotate(-45deg); | |
transition: all 150ms ease-in-out; | |
} | |
.rank-math-question.collapse:after { | |
transform: rotate(0deg); | |
} | |
.rank-math-question:hover { | |
opacity: 0.8; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment