Rank Math FAQ Block in Bricks Builder

21. Oktober 2023

Julian

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;
}