0

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');
}

1 respuesta 1

0

Tenes que tener en cuenta que estás dentro de un for, por lo que se van a repetir los elementos, y vas a tener varios elementos con el mismo id, eso te puede estar generando error. También creo que la linea: {% for equipo in equipo %}

debería ser equipos: {% for equipo in equipos %}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.