Rank Math FAQ Block in Bricks Builder

21. Oktober 2023

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.

Hinterlasse einen Kommentar

Wie hilfreich war dieser Beitrag?

Klicke auf die Sterne um zu bewerten!

Durchschnittliche Bewertung 0 / 5. Anzahl Bewertungen: 0

Bisher keine Bewertungen! Sei der Erste, der diesen Beitrag bewertet.