Make 200 characters display of message and give user option to expand message?

Question

Currently the subject text is displayed and when you click read more and then the whole message displays. My task is to display first 200 characters of the message text and also the user should be able to click read more which will then open the whole message.

<div class="alert @(alert.AnnouncementType == PCSS.CRM.Entities.pcs_portalserviceannouncementpcs_AnnouncementType.ServiceUpdate ? "alert-info": "alert-default")  alert -dismissible" role="alert">



<p class="small"><i class="fa fa-calendar" aria-hidden="true"></i> @alert.CreatedOn.ToLocalTime().ToString("dd MMM yyyy")</p>



<strong> @alert.AnnouncementTitle</strong>



<a href="javascript:void()" class="alertReadMore">Read more...<span class="caret"></span></a>



<a href="javascript:void()" class="alertReadLess" style="display:none">&nbsp;&nbsp;Read less<span class="dropup">



<span class="caret"></span></span></a>



<div class="alertMoreInfo" style="display:none">

                                                @Html.Raw(alert.AnnouncementText)<br /><br />

@if (alert.Notes != null)

{

foreach (var attFl in alert.Notes)

{

<i class="fa fa-download" aria-hidden="true"></i><a target="_blank" href="@Url.Action("DownloadAttachment", "Home", new { Id = attFl.Id })">@attFl.FileName</a>

}

}

<span></span>

</div>

</div>

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

You could do something like this,

if(AnnouncementText.length>200){
var firstPart=AnnouncementText.substring(0,200);
}

In this way you can display the firstPart alone in the alert before the read more part and when the readMore part is clicked the entire alert.AnnouncementText will be displayed adn on clicking the readLess part ,again the firstPart alone will be displayed

Make 200 characters display of message and give user option to expand message?

Sign up