In diesem Beitrag erklären wir dir, wie du im Bricks Builder einen Rank Math FAQ Block einfügst.
Hierzu benötigst du 3 Dinge
- WPCodeBox* oder ein ähnliches Code-Snippet-Tool
- Javascript-Code für den FAQ Block
- CSS-Code für den Rank Math FAQ Block
- optional: Automatic CSS* (ACSS) –> für die Variablen im CSS
jQuery in Bricks Builder aktivieren
Als erstes musst du jQuery in Bricks aktivieren.
Hierzu erstellst du in WPCodeBox ein neues PHP-Snippet.
In dieses fügst du folgenden Code ein:
<?php wp_enqueue_script( 'jquery' );JavaScript-Code für den Rank Math FAQ Block
Anschließend erstellst du ein neues JavaScript-Snippet mit folgendem Inhalt:
// // This version shows the first answer by default. // jQuery(document).ready(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);CSS-Code für den FAQ-Block (mit ACSS)
Dann fehlt nur noch passendes CSS, mit dem du den FAQ-Block stylen kannst.
#rank-math-faq .rank-math-list-item { margin-bottom: 1em; margin-top: 1em; background: var(--secondary-light); padding: var(--space-xs); border-radius: 1.4rem; } .rank-math-question { cursor: pointer; position: relative; display: block; font-weight: 300; color: var(--primary); } .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; } .rank-math-answer { padding:var(--space-m); }FAQ-Block CSS (ohne Automatic CSS)
#rank-math-faq .rank-math-list-item { margin-bottom: 2rem; margin-top: 2rem; background: #ffdab3; padding: 1rem; border-radius: 1.4rem; } .rank-math-question { cursor: pointer; position: relative; display: block; font-weight: 300; color: #001980; } .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; } .rank-math-answer { padding: 1rem; }Fazit
Selbstverständlich kannst du das CSS so anpassen, wie du es dir wünschst.
Falls du Fragen hast, hinterlass und gerne einen Kommentar oder schreib uns eine Mail.