1

Tengo este botón que al tocarlo muestra mi progress bar, el problema es que estoy usando el mecanismo de Acordiones de Bootstrap 5. Y aunque funciona bien, la idea es que al tocar varias veces el botón, la barra ya no se oculte.

Hay alguna forma de corregirlo? O cómo podría hacerlo sin Jquery?

PD: Ya probé agregando aria-expanded="true" pero no funcionó.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" class="btn btn-primary mb-3" id="inicio" data-bs-toggle="collapse" data-bs-target="#mostrar" aria-expanded="true" aria-controls="mostrar">Iniciar</button>
<div class="accordion-collapse collapse" aria-expanded="true" aria-labelledby="inicio" id="mostrar">
  <div class="progress border">
    <div class="progress-bar progress-bar-animated bg-warning text-white" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
</div>

1 respuesta 1

1

Luego de investigar un tiempo, logré hacerlo con Vanilla Javascript.

document.getElementById("inicio").onclick = function() {
  var z = document.getElementById("prueba");
  // reviso si el elemento ya está oculto
  if (z.style.display == 'none') {
    z.style.display = 'block';
  }
}
<!--SCRIPT PARA MOSTRAR ELEMENTO CON BOTÓN Y NO OCULTARLO-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<button type="button" class="btn btn-primary mb-3" id="inicio">Iniciar</button>

<div class="progress border" id="prueba" style="display: none;">
  <div class="progress-bar progress-bar-animated bg-warning text-white" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
</div>

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.