I am working on a Django template that generates multiple buttons and aims to toggle the visibility of description text onclick (on the same button in each card):
{% for comida in comidas %}
{% if comida.slug_food == page.slug %}
<div class="food2">
<div id="food-title">{{comida.titulo}}</div>
<div id="food-price">{{comida.precio|floatformat:"-1"}}€</div>
<button class="button" onclick="showDescription(this)">ver+
<div id="food-description" >
{{comida.descripcion|safe}}
</div>
</button>
<div id="add-cart">AÑADIR AL PEDIDO</div>
{% if comida.imagen != null %}
<img src="{{comida.imagen.url}}"></img>
{% endif %}
</div>
{% endif %}
{% endfor %}
where comidas represents a list of strings, and further down in the script block, I've set up:
function showDescription(button){
var parentDiv = button.parentNode;
var showText = parentDiv.querySelector("#food-description");
if (showText.style.display === "block"){
showText.style.display = "none";
} else {
showText.style.display = "block";
}
}
The function currently only toggles the first element due to its implementation. Can someone assist me in making it work for all buttons?
I'm open to suggestions and guidance on how to resolve this issue effectively.