Recently, I've been experimenting with symfony and have successfully generated cards containing FAQ questions and answers. My current challenge is adding a collapse function to these cards. How can I achieve this?
I considered implementing an accordion collapse but haven't found a suitable solution online. If anyone has any tips on how to add a collapse feature to these generated cards, I would greatly appreciate it.
I believe the provided code includes everything necessary, but please let me know if additional information is required.
Any assistance will be highly valued!
{% 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 %}
Experience Manager
{% endblock %}
{% block content %}
{% endblock %}