CODEWITHSUNDEEP
jquery
Rajan
Rajan

Reputation: 27

Read More/Less using jquery without lossing html

I have written jquery to add read more/read less after 250 characters. I have implemented following query:

var minimized_elements = $('.field-type-text-with-summary .field-items');
var minimize_character_count = 250;    
minimized_elements.each(function(){    
  var TextContent = $(this).text();
  var TextContentLenght = TextContent.length;
  var t = $(this).html();
  if(t.length < minimize_character_count ) return;
  $(this).html(
    t.slice(0,minimize_character_count)+
      '<span>...</span>'+'<a href="#" class="read_more"     style="color:#FF8403;">Read more</a>'+
      '<span style="display:none;">'+ TextContent.slice(minimize_character_count,TextContentLenght)+'&nbsp'+'<a href="#" class="read_less" style="color:#FF8403;">Read less</a></span>'
    );  
  });
  $('a.read_more', minimized_elements).click(function(event){
    event.preventDefault();
    $(this).hide().prev().hide();
    $(this).next().show(); 

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

  });

But my problem is that this script remove all html tags like if text contain bold or underlined characters it showing all text into plain text. I want read more / read less with all formating. Please suggest . Tons of thanks in advance.

Upvotes: 2

Views: 1320

Answers (2)

Sheo Sagar
Sheo Sagar

Reputation: 917

    <!doctype html>

<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.readLess{ display:none;}
.conteMain{ border:1px solid #ddd; background:#f5f5f5; padding:10px; font:normal 14px Arial, Helvetica, sans-serif;}
#conteMain p{ margin:0; padding:0;}
.readLess,.readMore{ background:#3CF; color:#fff; padding:5px 10px; width:80px; margin:10px 0px; cursor:pointer}
.readLess:hover,.readMore:hover{ background:#090}
</style>
</head>

<body>
<div class="conteMain">
<div id="conteMain">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.<br>
<br>
<p>vived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like </p><br>

<p>vived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like </p><br>

<p>vived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like </p><br>

<p>vived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like </p><br>

<div>ved not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software l</div><br>


 It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
    var conte = $("#conteMain").text().length;
    var conte1 = $("#conteMain").text();
    var bx1 = conte1.slice('',200); 

    if(conte > 200){
        $("#conteMain").after("<span class='moreC'>"+ bx1 +"</span>"+"<div class='readMore'>Read More</div><div class='readLess'>Read Less</div>");
        $("#conteMain").css("display","none");
    };

    $(".readMore").click(function(){
        $("#conteMain").slideDown("slow");
        $(".moreC").css("display","none");
        $(".readLess").css("display","block");
        $(this).css("display","none");
    });

    $(".readLess").click(function(){
        $("#conteMain").slideUp("slow");
        $(".moreC").css("display","block");
        $(".readMore").css("display","block");
        $(this).css("display","none");
    });

</script>
</body>
</html>

Upvotes: 1

Ziv Weissman
Ziv Weissman

Reputation: 4526

You are using:

 var TextContent = $(this).text();

So you are counting the letters of text only while you select your substring based on .html(). This will count full html including the text of the elements.

var TextContent = $(this).html();

This is not an easy thing because when you cut your substring of let's say 0 to 250 you can break in the middle of html element.

The simplest solution for keeping the HTML as it is, is by using changing height. (on read less, height of element is for example 50px and then on readmore it is "auto" or whatever).

Another solution which is more complicated is going through all child elements of your main .each(), summing them, and when you have combined .text() length greater than 250, you should place the "readmore". (But depending of your HTML structure you should take into consideration that the current length without the children can already be greater than 250...

I recommend go with the height approach, if not you can make a fiddle and we can help you.

Upvotes: 0

Related Questions