Bootstrap CSS/Javascript responsive design feature

I am using bootstrap version 2.3.1 with the responsive utilities. I would like to create a way to collapse the content of a page to only its headers automatically when viewed from small mobile screens, and then show the content when the user taps the header they are interested in seeing. An example for this is the wikipedia mobile site. When viewed on larger screens, the content would display as normal with the header and then the content for the section underneath it. It would be best if this could be specified on a basis so that only the divs I specify to be collapsible are collapsed. When a div does collapse, the header contained in the div should become a tappable link with an icon added indicating it can be expaned (again, see the wikipedia mobile site).