Как я могу добавить коллапс начальной загрузки к этим динамически загружаемым картам? - PullRequest
Новая
       28

Как я могу добавить коллапс начальной загрузки к этим динамически загружаемым картам?

0 голосов
/ 07 ноября 2018

Итак, в последнее время я возился с Symfony, и сейчас я могу сгенерировать эти карты, которые содержат наши вопросы и ответы по часто задаваемым вопросам. Мой вопрос: как я могу добавить функцию свертывания к этим сгенерированным картам?

Я думал о том, чтобы сделать коллапс на аккордеоне, но я не могу найти много в интернете, который бы работал на меня. так что если кто-нибудь может дать мне несколько советов о том, как я мог бы добавить коллапс к этим сгенерированным картам.

Я думаю, что это должен быть весь код, который мне действительно нужно включить, но если вам нужно что-то еще, дайте мне знать

Любая помощь будет очень признательна! 

{% extends 'base.html.twig' %}

{% block scripts %}
    {{ parent() }}
    <script>
        var counter = 0;
        const content = document.getElementById('content');
        $(document).ready(function() {
        $.ajax({
            url: "http://127.0.0.1:8000/api/faq"
        }).then(function(data) {
            data.forEach(FAQ => {
                counter++;
                const card = document.createElement('div');
                card.setAttribute('class','card');
                const question = document.createElement('h3');
                question.setAttribute('id','question'+counter);
                const answer = document.createElement('p');
                answer.setAttribute('id', 'answer'+counter);

                content.appendChild(card).className = "FAQCard";
                card.appendChild(question);
                card.appendChild(answer);


                $('#question'+counter).append(FAQ.question );
                $('#answer'+counter).append(FAQ.answer );

            })

        });

    });

</script>
{% endblock %}

{% block title %}
    Ervaringsmanager
{% endblock %} 

{% block content %}
{% endblock %}

1 Ответ

0 голосов
/ 07 ноября 2018

Поскольку вы используете Bootstrap 4, вы можете сделать что-то подобное очень легко.

Сначала необходимо определить триггер и блок корпуса карты.

Допустим, у вас есть button в качестве триггера коллапса. button должен иметь атрибуты данных data-toggle и data-target. Смотри ниже, 

<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">Simple collapsible</button>

Свертывающий / расширяющийся блок тела карты должен иметь id и class и должен совпадать с data-target и data-toggle, соответственно, с вышеуказанным триггером. 

<div id="demo" class="collapse">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>

Пример , https://codepen.io/anjanasilva/pen/LXGEgK

Для динамического применения,

Используйте $(element).data('toggle', 'collapse'); и $(element).data('target', '#ID'); для этих триггеров коллапса. Для тела выберите элемент add, добавьте класс collapse вот так $(element).addClass('collapse');.

Надеюсь, это поможет,

Приветствие ..

...