Error showing the rest of the text with a button?

Question

Error showing the rest of the text with a button?

Navigation

#1 by (3 votes)

0

I'm using javascript to show the truncate of a text, but when you click to show the rest of the text, just enter the value inside the incomplete button.

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

this is what it displays:

but when I press the button it only passes the text inside the button, I would appreciate if you help me showing where I made the error

javascript html5

asked by JULIO MACHAN 09.10.2017 в 22:51

source

1 answer

Take a file path from an array of C # files Automatically submit "daughter routes". Angular 2

score 3 · Accepted Answer

This can help you

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>