0

Estoy usando javascript para mostrar el truncate de un texto, pero cuando se hace clic para mostrar el resto del texto, solo ingresa el valor dentro del botón incompleto.

html:

  <div class="col-lg-10 ">
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam rem quisquam vel nulla maxime adipisci exercitationem eaque facilis quasi aliquam dolorem molestias magni omnis labore excepturi est molestiae reiciendis nisi?</span>
    <button type="button" id="info" name="button">Data informacion</button>
  </div>

javascript:

var lengthText = 90;
var text = $('span').text();
var shortText = $.trim(text).substring(0, lengthText).split(" ").slice(0, -1).join(" ") + "...";
$('span').text(shortText);

$('button').click(function() {
  $('span').show();
}

esto es lo que despliega:

introducir la descripción de la imagen aquí

pero cuando presiono el botón solo pasa el texto dentro del botón, agradecería si me ayudaran mostrando donde cometo el error

1
  • A ver si entendi. Quieres que al dar clic al boton, se visualize todo el texto en el span?
    – Einer
    Commented el 9 oct. 2017 a las 21:01

1 respuesta 1

3

Esto te puede ayudar

var lengthText = 90;
//Aqui en la variable text guardas el texto antes de ocultarlo
      var text = $('span').text();
      var shortText = $.trim(text).substring(0, lengthText).split(" ").slice(0, -1).join(" ") + "...";
      $('span').text(shortText);
//entonces para mostrarlo nuevamente solo necesitas mostrar la variable text
      $('button').click(function(event) {
         $('span').text(text);
     });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

    <div class="col-lg-12 ">
        <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam rem quisquam vel nulla maxime adipisci exercitationem eaque facilis quasi aliquam dolorem molestias magni omnis labore excepturi est molestiae reiciendis nisi?</span>
        <button type="button" id="info" name="button">Data informacion</button>
    </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.