javascript - Angular js display gmail like overlapping email threads -

I'm trying to create something like this (similar to Gmail email thread):

  | -------------------------- | | First message (clip) | | -------------------------- | | -------------------------- | | ======= 4 messages ====== | | -------------------------- | | -------------------------- | | Second final message (clip) | | -------------------------- | | Hello there, | This is my last message. | The whole lesson is. | Displayed | | -------------------------- |  

You have more than one message, all have initially collapsed and users can only see the last message with the last part of the last part of 1 and 2. When the user clicks on the center part of the collapsed part, all the messages are expanded.

Is there any such customary instruction that provides something similar or some open source which I can use it, will provide extension / compressed options. I am trying to avoid writing it from scratch.

I have taken a look at Bootstrap Empowerment, but it will expand / collapse the entire message thread.

Any guidance / help is appreciated.

Thank you!

You can also get desired results with some CSS:

 < Code> & lt; Div class = "inbox" & gt; & Lt; Div class = "message" & gt; Message 1 & lt; / Div & gt; & Lt; Div class = "message" & gt; Message 2 & lt; / Div & gt; & Lt; Div class = "message" & gt; Message 3 & lt; / Div & gt; & Lt; Div class = "message" & gt; Message 4 & lt; / Div & gt; & Lt; Div class = "message" & gt; Message 5 & lt; / Div & gt; & Lt; Div class = "message" & gt; Message 6 & lt; / Div & gt; & Lt; Div class = "message" & gt; Message 7 - Last message & lt; / Div & gt; & Lt; / Div & gt;  

CSS:

  .message {height: 10px; Border: 1px solid red; Hidden flurry; }. Message: First-child {height: 100px; }. Message: The last child {height: auto; }}