Temas

Muy buenas.

Tengo el siguiente código html (usando bootstrap):

<a href="#mas-info" class="btn btn-lg btn-default btn-mas-info" data-toggle="collapse" id="btn-mas-info">Leer más</a>

         <div class="collapse" id="mas-info">
            <div class="well">
               <p>
                  En misecu, podrás encontrar antiguos compañeros de escuela, publicar tus anécdotas vividas en tu centro escolar y estar entre los más votados del ranking de publicaciones.
               </p>
            </div>
         </div>

Y el siguiente código javascript:

$(function(){


   // -- BOTÓN LEER MÁS --
   $("#btn-mas-info").click(mostrarInfo);


});

// -- BOTÓN LEER MÁS --
   function mostrarInfo() {
      if($("#btn-mas-info").html() == "Leer más"){
         $("#btn-mas-info").html("Ocultar");
      }
      else {
         $("#btn-mas-info").html("Leer más");
      }
   }

Mi duda es:

Al pulsar el botón, el texto del botón cambiará a "Ocultar" y se mostrará el div que estaba oculto y contiene más información.

El problema que tengo es que si ese botón lo pulso antes de que se muestre del todo ese div, cuando el div ya esté mostrado, el texto del botón sera "Leer más".

Es decir, me gustaría saber cómo deshabilitar el evento click hasta que el div haya finalizado de mostrarse u ocultarse.

He probado utilizando bind y unbind, pero no me sale. Mi gran duda es cómo hacer esto, ya que yo no controlo que ese div se muestre y se oculte, eso lo controla el propio bootstrap.

Espero haberme explicado bien. Ojalá puedan ayudarme.

Un saludo.