Rishi Rishi - 4 days ago 5
CSS Question

Html Read More code

I am creating Read More Code in Html.

Everything is working fine. but when I click on Read More . then it displays data along with text-ellipsis property ie. ...*. I want Read More text to be center in next line which I am getting but it displays ... also.

output I want

Output I m getting.

There is three dots ... after mauris text.

How can I remove that.



$(document).ready(function() {
var showChar = 400;
var ellipsestext = "...";
var moretext = "Read More";
var lesstext = "Read Less";
$('.more').each(function() {
var content = $(this).html();

if(content.length > showChar) {

var c = content.substr(0, showChar);
var h = content.substr(showChar-1, content.length - showChar);

var html = c + '<span class="moreelipses">'+ellipsestext+'</span>&nbsp;<span class="morecontent"><span>' + h + '</span><div class="text-center margin_top_10"><a href="" class="morelink">'+moretext+'</a></div></span>';

$(this).html(html);
}

});

$(".morelink").click(function(){
if($(this).hasClass("less")) {
$(this).removeClass("less");
$(this).html(moretext);
} else {
$(this).addClass("less");
$(this).html(lesstext);
}
$(this).parent().prev().toggle();
$(this).prev().toggle();
return false;
});
});

.comment {
width: 93%;
margin: 0 auto;
}
a.morelink {
outline: none;
color: #5bc0de !important;
}
.morecontent span {
display: none;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="row b-t padding_top_bottom_10">
<div class="col-md-12 col-sm-12 col-xs-12 ">
<div class="comment more font_size_14"> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vestibulum laoreet, nunc eget laoreet sagittis,
quam ligula sodales orci, congue imperdiet eros tortor ac lectus.
Duis eget nisl orci. Aliquam mattis purus non mauris
blandit id luctus felis convallis.
Integer varius egestas vestibulum.
Nullam a dolor arcu, ac tempor elit. Donec.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vestibulum laoreet, nunc eget laoreet sagittis,
quam ligula sodales orci, congue imperdiet eros tortor ac lectus.
Duis eget nisl orci. Aliquam mattis purus non mauris
blandit id luctus felis convallis.
Integer varius egestas vestibulum.
Nullam a dolor arcu, ac tempor elit. Donec. </div>
</div>
</div>




Answer

Add $(".moreelipses").toggle(); in read more button onClick

   $(document).ready(function() {
        var showChar = 400;
        var ellipsestext = "...";
        var moretext = "Read More";
        var lesstext = "Read Less";
        $('.more').each(function() {
            var content = $(this).html();

            if(content.length > showChar) {

                var c = content.substr(0, showChar);
                var h = content.substr(showChar-1, content.length - showChar);

                var html = c + '<span class="moreelipses">'+ellipsestext+'</span>&nbsp;<span class="morecontent"><span>' + h + '</span><div class="text-center margin_top_10"><a href="" class="morelink">'+moretext+'</a></div></span>';

                $(this).html(html);
            }

        });

        $(".morelink").click(function(){
            if($(this).hasClass("less")) {
                $(this).removeClass("less");
                $(this).html(moretext);
            } else {
                $(this).addClass("less");
                $(this).html(lesstext);
            }
            $(".moreelipses").toggle();
            $(this).parent().prev().toggle();
            $(this).prev().toggle();
            return false;
        });
    });
.comment {
  width: 93%;
  margin: 0 auto;
}
a.morelink {
  outline: none;
  color: #5bc0de !important;
}
.morecontent span {
  display: none;

}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="row b-t padding_top_bottom_10">
<div class="col-md-12 col-sm-12 col-xs-12 ">
<div class="comment more font_size_14"> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Vestibulum laoreet, nunc eget laoreet sagittis,
  quam ligula sodales orci, congue imperdiet eros tortor ac lectus.
  Duis eget nisl orci. Aliquam mattis purus non mauris
  blandit id luctus felis convallis.
  Integer varius egestas vestibulum.
  Nullam a dolor arcu, ac tempor elit. Donec.
  
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Vestibulum laoreet, nunc eget laoreet sagittis,
  quam ligula sodales orci, congue imperdiet eros tortor ac lectus.
  Duis eget nisl orci. Aliquam mattis purus non mauris
  blandit id luctus felis convallis.
  Integer varius egestas vestibulum.
  Nullam a dolor arcu, ac tempor elit. Donec. </div>
  </div>
</div>

Comments