javascript - mostrar - ocultar html

Trunca el primer párrafo de 100 caracteres y oculta el contenido del resto del párrafo para mostrar/ocultar el contenido de resto con más/menos enlace

Question

Tengo el párrafo que tiene más de 500 caracteres. Solo quiero obtener 100 caracteres iniciales y ocultar el resto. También quiero insertar el enlace "Más" junto a 100 caracteres. Al hacer clic en más de un enlace, todo el párrafo debe mostrar y editar el texto "Más" a "Menos" y al hacer clic en "Menos", debe cambiar el comportamiento. El párrafo se genera dinámicamente. No puedo ajustar el contenido de él usando .wrap (). Aquí hay un ejemplo de lo que tengo y lo que quiero.

Esto es lo que tengo :

  <p>It is a long established fact that a reader will be distracted by the readable 
   content of a page when looking at its layout. The point of using Lorem Ipsum is that
   it has a more-or-less normal distribution of letters, as opposed to using ''Content 
  content here'', making it look like readable English. Many desktop publishing packages 
   and web page editors now use Lorem Ipsum as their default model text.</p>

Esto es lo que quiero cuando se carga DOM

 <p>It is a long established fact that a reader will be distracted by ..More</p>

Esto es lo que quiero cuando el usuario haga clic en "Más"

   <p>It is a long established fact that a reader will be distracted by the readable 
   content of a page when looking at its layout. The point of using Lorem Ipsum is that
   it has a more-or-less normal distribution of letters, as opposed to using ''Content 
  content here'', making it look like readable English. Many desktop publishing packages 
   and web page editors now use Lorem Ipsum as their default model text. ..Less</p>

Cuando hacemos clic en "Menos", debería revertir lo que ha hecho al hacer clic en "Más".

Estoy usando jQuery para dividir, dividir y envolver la subcadena en el intervalo que quiero ocultar, pero eso no funciona.

var title = $("p").text();
var shortText = jQuery.trim(title).substring(100, 1000).split(" ")
    .slice(0, -1).join(" ") + "...More >>";
shortText.wrap(''</span>'');

Answer 1

¿Has visto el plugin jQuery Truncator ?

Hace más o menos exactamente lo que has descrito.

Answer 2

Fiddle: http://jsfiddle.net/iambriansreed/bjdSF/

jQuery:

jQuery(function(){

    var minimized_elements = $(''p.minimize'');
    var minimize_character_count = 100;    

    minimized_elements.each(function(){    
        var t = $(this).text();        
        if(t.length < minimize_character_count ) return;

        $(this).html(
            t.slice(0,minimize_character_count )+''<span>... </span><a href="#" class="more">More</a>''+
            ''<span style="display:none;">''+ t.slice(minimize_character_count ,t.length)+'' <a href="#" class="less">Less</a></span>''
        );

    }); 

    $(''a.more'', minimized_elements).click(function(event){
        event.preventDefault();
        $(this).hide().prev().hide();
        $(this).next().show();        
    });

    $(''a.less'', minimized_elements).click(function(event){
        event.preventDefault();
        $(this).parent().hide().prev().show().prev().show();    
    });

});​

Answer 3

Gracias a @iambriansreed por su buena función, aquí hay una pequeña modificación para truncar el párrafo en saltos de línea :

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
jQuery(function(){

var minimized_elements = $(''p.minimize'');
var maxLines = 20;

minimized_elements.each(function(){    
    // var textArr = $(this).text().split(//n/); // Not supported in IE < 9
    var textArr = $(this).html().replace(//n?<br>/gi,"<br>").split(/<br>/);
    var countLines = textArr.length;

    if (countLines > maxLines) {
        text_less = textArr.slice(0, maxLines).join("<br>");
        text_more = textArr.slice(maxLines, countLines).join("<br>");
    }
    else return;

    $(this).html(
        text_less + ''<span>... </span><a href="#" class="more">More</a>''+
        ''<span style="display:none;">''+ text_more +'' <a href="#" class="less">Less</a></span>''
    );
}); 

$(''a.more'', minimized_elements).click(function(event){
    event.preventDefault();
    $(this).hide().prev().hide();
    $(this).next().show();        
});

$(''a.less'', minimized_elements).click(function(event){
    event.preventDefault();
    $(this).parent().hide().prev().show().prev().show();    
});

});

</script>

Answer 4

No es el mejor resultado de Google, pero he utilizado el complemento jQuery Expander con gran éxito. Está bien porque no esconde nada de los robots de los buscadores.

Answer 5

Parece que un par de personas más me ganaron, pero esto es lo que se me ocurrió.

var MORE = "... More...",
    LESS = " Less...";

$(function(){
    $("p").each(function(){
        var $ths = $(this),
            txt = $ths.text();

        //Clear the text
        $ths.text("");

        //First 100 chars
        $ths.append($("<span>").text(txt.substr(0,100)));

        //The rest
        $ths.append($("<span>").text(txt.substr(100, txt.length)).hide());

        //More link
        $ths.append(
            $("<a>").text(MORE).click(function(){
                var $ths = $(this);

                if($ths.text() == MORE){
                    $ths.prev().show();
                    $ths.text(LESS);
                }
                else{
                    $ths.prev().hide();
                    $ths.text(MORE);
                }
            })
        );
    });
});

Answer 6

para todos los que han venido aquí buscando más ... Aquí hay otro complemento http://viralpatel.net/blogs/dynamically-shortened-text-show-more-link-jquery/