How to get the first line of message body as message title using bootstrap collapse

Question

I am using bootstrap panel collapse to display a list of messages. When the panel is expanded, the user can see the message in the panel body.

Right now I have hard coded the panel title as "Read Message", but now, the requirement is such that, when the panel is in collapse state, the first line of the message that is there in the panel body should appear as the panel title. I have used a model class from which I am rendering the message body. How can I achieve this?
Here is my code:
View:

@{int i = 0;}
@foreach (var item in Model.MessageHeaderList)
{
 <div class="panel-group col-md-8" id="accordion_@i">
 <div class="panel panel-default" id="panel_@i">
 <div class="panel-heading" id="headingOne_@i">

  <h4 class="panel-title">
  <a class="collapsed" data-toggle="collapse" data-parent="#accordion_@i" href="#collapseOne_@i">
  Read Message
  </a>
  </h4>
  </div>
  <div id="collapseOne_@i" class="panel-collapse collapse">
  <div class="panel-body">
   @Html.Raw(item.MessageText)
  </div>
  </div>
  </div>
  </div>
}
i++;

And another property to your model (say `string MessageHeading`) that contains the text you want to display and use `item.MessageHeading` in your panel title. — , Apr 07 '16 at 05:43
@StephenMuecke yes but how will I display only the first line? do I have to use `split()` or something? The entire message text is a column in the db table. — Sumedha Vangury, Apr 07 '16 at 05:48
You will not be able to work that out exactly (its the browser which is generating the text) unless each line is separated by a NewLine character, but you could do an approximation and then in the controller - `MessageHeading = MessageText.Substring(0, 50);` to display the first 50 characters. — , Apr 07 '16 at 05:51
Alternatively you could use `item.MessageText` inside an element styled with `overflow: hidden; white-space: nowrap; text-overflow: ellipsis;` — , Apr 07 '16 at 05:54
Put the first Message text in the title, and use CSS to only display the first line. You may trim the message text as required — galdin, Apr 07 '16 at 05:55
Refer [this fiddle](https://jsfiddle.net/dhcLx3bd/) for an example of using css — , Apr 07 '16 at 05:59
@StephenMuecke the css solution given by you works good but when the message is too big there are multiple lines appearing in the title thus disturbing the layout, I want just one line with a maximum of 50 characters,what should I do? — Sumedha Vangury, Apr 07 '16 at 06:23
The css I have shown will only display one line of text (with the ellipses). If not, then you have some other css that's interfering with it. — , Apr 07 '16 at 06:47
@StephenMuecke yes I had added css to display downward arrow when message is collapsed. But I tried to give your css a different name and called it in the label element,but it still does not give the required output — Sumedha Vangury, Apr 07 '16 at 06:52
Without knowing you other css rules I can't really comment I why its not working. Perhaps if you forked the fiddle and added your css I can check — , Apr 07 '16 at 06:55
@StephenMuecke this is my [fiddle] (https://jsfiddle.net/8ku9jgpj/) — Sumedha Vangury, Apr 07 '16 at 07:02
@StephenMuecke when I write a really many paragraphs it shows multiple lines taking first line from each paragraph — Sumedha Vangury, Apr 07 '16 at 07:12
@StephenMuecke I dint really get it, thanks a ton for taking out time to help me — Sumedha Vangury, Apr 07 '16 at 07:22

score 2 · Answer 1 · answered Apr 07 '16 at 06:13

Set an id to the anchor tag

<a id="Header" class="collapsed" data-toggle="collapse" data-parent="#accordion_@i" href="#collapseOne_@i">
    Read Message
</a>

Now simple write a jquery to set innertext for the anchortag while the div is having class collapsed just like this

<div id="collapseOne_@i" class="panel-collapse collapse checkForCollaps">
  <div class="panel-body">
    @Html.Raw(item.MessageText)
  </div>
</div>

<script>
if ($(".checkForCollaps").hasClass("collapse")) {
    $('#Header').text($('.panel-body').text());
}
</script>

You may do like this, it will help you surely...

thanks for your answer but this does not work. The entire message gets displayed in the title — Sumedha Vangury, Apr 07 '16 at 07:52

score 0 · Answer 2 · edited May 23 '17 at 12:24

Thanks for all your help, I finally found the perfect solution through the answer posted by @NathanA here:here I directly took the substring of the message being passed, in the view itself, as below

@item.MessageText.Substring(0, Math.Min(item.MessageText.Length, 50))

Here is the entire code:

@{int i = 0;}
@foreach (var item in Model.MessageHeaderList)
{
  <div class="panel-group col-md-8" id="accordion_@i">
  <div class="panel panel-default" id="panel_@i">
  <div class="panel-heading" id="headingOne_@i">

  <h4 class="panel-title">
  <a class="collapsed" data-toggle="collapse" data-parent="#accordion_@i" href="#collapseOne_@i">
  @item.MessageText.Substring(0, Math.Min(item.MessageText.Length, 50))
  </a>
 </h4>
 </div>
 <div id="collapseOne_@i" class="panel-collapse collapse">
 <div class="panel-body">
   @Html.Raw(item.MessageText)
  </div>
  </div>
  </div>
  </div>
}
i++;

How to get the first line of message body as message title using bootstrap collapse

2 Answers2