Rank Math FAQ Block in Bricks Builder

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.