HTML Question
Make 200 characters display of message and give user option to expand message?
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"> 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>
Answer
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
Source (Stackoverflow)