collapse all and expand all using bootstrap and jquery

Hi All,

I need to display set of comments from Database in one of my asp.net web forms.
I need to display the comment on the click of down arrow. Once the comment is shown the arrow should be changed to up arrow. Clicking the up arrow will hide the comment and changes itself to down arrow.

I need to do this dynamically in C# and asp.net because the comments, username and entrytime are retrieved from database into datatable. so for every row in the datatable I need to create a div with its inner html set for above effect. I also need to have expand all and collapse all links where the first will show all comments and collapse all will hide all comments.

using bootstrap I tried doing some of it in jsfiddle. The link is here.
http://jsfiddle.net/9h2bgndg/12/ 

I have no clue how to do expand all and collapse all. Your help is appreciated.