FAQ for Drupal 7 from improvised means

In principle, to create an FAQ for the seventh Drupal, there is already a bad module faq_fields, which adds the faq field to the content type, but the task has appeared - to make template questions for all categories with the substitution of the category name in the question, so that when editing a category, you can enter only answers for template questions.

Go to the taxonomy term and add a text field field_ansver, with a field type full text with a text area in multiple lines. For convenience, we give the label "Answer to 1 question" and in the field of the reference text you can insert our template question, so that when driving in the answer it would be clear which question we are answering. Let's put 3 lines and the amount of 1 piece. Thus, we have a template for an answer.

Now we create a new view with the output of the taxonomy terms of our category dictionary, output the fields

faq

Since this block with a view will be displayed on the category page, we immediately link it. In the context filter, add - Taxonomy term: term ID and choose to provide a default value by id from url

faq

Add the taxonomy term field that we created above to the fields, while checking the "Exclude from output"

faq

Add our field with the operator <Yes> to the filtering criteria

faq

faq

Thus, our block will be displayed if the response field is filled.

Now add the Global PHP field to the fields with the following code in the Output code

<?php 
    $current_url = $_SERVER['REQUEST_URI'];
    $url = substr($current_url, 1);
    $current_term_path = db_query("SELECT source FROM `d7_url_alias` WHERE `alias` = '$url'")->fetchAll();
    $tid = str_replace('taxonomy/term/', '', $current_term_path['0']->source);
    $term = taxonomy_term_load($tid);
    $name = $term->name;
    echo '<div id="faq" class="ui-accordion ui-widget ui-helper-reset" role="tablist" itemscope itemtype="https://schema.org/FAQPage">';
    if (!empty($row->field_ansver1)) {
        echo '<div class="faq-block" itemscope itemprop="mainEntity" itemtype="https://schema.org/Question"><button class="faq-title" itemprop="name">? Как быстро заказать '. $name .' ❓</button><div class="faq-body panel" itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer"><div itemprop="text">' . $row->field_ansver1 .'</div></div></div>';
    }
    echo '</div>
        <script>
            var acc = document.getElementsByClassName("faq-title");
            var i;
            for (i = 0; i < acc.length; i++) {
                acc[i].addEventListener("click", function() {
                    this.classList.toggle("active");
                    var panel = this.nextElementSibling;
                    if (panel.style.display === "block") {
                        panel.style.display = "none";
                    } else {
                        panel.style.display = "block";
                    }
                });
            }
        </script>';
?>

A little explanation on the code. First, we get the ID of our open category by the url of the current page and get an array with the category data, including the fields and our response field. Then, via echo, we output directly the html code with the substitution of the name of the open category for the question template. In this example, the schema markup for questions and answers is immediately added. And at the end there is a script that allows you to expand divs from answers when you click on a question.

Decorating with styles

For a full-fledged work, it remains only to add styles for this whole case.

#faq-header {
    text-align: center;
    font-size: 20px;
    margin: 10px 0;
}

#faq .faq-block {
    margin: 20px 0;
}

#faq .faq-body-open {
    display: block !important;
}

#faq .faq-title {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

#faq .active,
#faq .faq-title:hover {
    background-color: #ccc; 
}

#faq .faq-body {
    padding: 20px;
    display: none;
    background-color: white;
    overflow: hidden;
    transition: 0.4s;
}

Done! You can also add as many question fields as you like, and accordingly, as many conclusions will need to be made in PHP.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.
The comment language code.