tengo un problema en mi proyecto, quiero mostrar un conjunto de nombres, valores que se muestran con un ciclo for, al seleccionar el nombre se desplieguan los datos de la persona, al volver a seleccionarlo se guarda, esta operación para cada nombre por seperado. El problema está en que no sé cómo puedo iterar por cada valor para que se muestre cuando se selecciona, me dice que la variables hideText y hideText_btn están vacias. Agradecería la ayuda. Gracias de antemano
código HTML
{% for equipo in equipo %}
<button class="btn btn-outline-Light" id="hideText_btn" type="button"> {{ equipo.cargo }}: {{equipo.nombre }}
<img src="{% static 'img/pleca.png' %}" alt="" width="15px" height="15px">
</button>
<span class="hide" id="hideText">
{% if equipo.imagen %}
<div class="col-sm-12 row">
<div class="col-sm-3">
<img class="mt-2" src="{{ equipo.imagen.url }}" alt="" width="100%">
</div>
<div class="col-sm-9">
<label for="">{{ equipo.descripcion }}</label>
<a href="{{ equipo.correo }}">{{ equipo.correo }}</a>
</div>
</div>
{% else %}
<div class="col-sm-12">
<label for="">{{ equipo.descripcion }}</label>
<a href="{{ equipo.correo }}">{{ equipo.correo }}</a>
</div>
{% endif %}
</span>
{% endfor %}
css
.hide{
display: none;
}
.show{
display: block;
}
javascript
let hideText_btn = document.getElementById('hideText_btn');
let hideText = document.getElementById('hideText');
hideText_btn.addEventListener('click', toggleText);
function toggleText(){
hideText_btn.classList.toggle('.show');
}