How can I add a bootstrap collapse to these dynamically loaded cards?

user_10595935 0
Viewed 1777

So I've been messing around with symfony as of late, and right now I can generate these cards which contain our FAQ questions and answers, my question is: How can I add a collapse function to those generated cards?

I was thinking about doing a accordion collapse, however I can't find a whole lot on internet that worked for me. so if anyone can give me some tips on how I could possibly add a collapse to these generated cards.

I think this should be all the code I really need to include, but if you need anything else let me know

Any help would be really appreciated!

{% 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 %}
bootstrap-4 twig javascript
1 Answers

Since you are using Bootstrap 4, you can do something like this very easily.

First you need to identify the trigger and body block of the card.

Let's say you have a button as the collapse trigger. The button needs to have the data-toggle and data-target data attributes. See below, 

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

The collapsing / expanding body block of the card needs to have the id and class and needs to match with the data-target and data-toggle, respectively with the above trigger.

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

An example, https://codepen.io/anjanasilva/pen/LXGEgK

To dynamically apply,

Use $(element).data('toggle', 'collapse'); and $(element).data('target', '#ID'); for those collapse triggers. For the body, target the element add add the class collapse like this $(element).addClass('collapse');.

Hope this helps,

Cheers..

user_7676250
Related