Bootstrap collapse doesn't add .collapsed when using class selector - twitter-bootstrap-3

Question

I'm using Bootstrap 3.3.4. I have a panel with a heading and footer, and a glyphicon to indicate the open/closed state of the panel.
If I use the id of the panel body as the selector for collapse then Bootstrap correctly applies the .collapsed class to the heading and the glyphicon changes. However, I want to also collapse the footer so I changed to using a class selector for collapse. The good news is the footer now also collapses; the bad news is that .collapsed is no longer applied to the heading and thus the glyphicon doesn't change.
CSS
.collapsible {
cursor: pointer;
}
.panel-heading.collapsible:after {
font-family:"Glyphicons Halflings";
content:"\e114";
float: right;
color: darkslategary;
}
.panel-heading.collapsible.collapsed:after {
content:"\e080";
}
HTML
<div class="panel">
<div id="theHeader2" class="panel-heading collapsible" data-target=".shrinkme" data-toggle="collapse">Collapse</div>
<div id="theBody2" class="panel-body shrinkme collapse in">
nim pariatur cliche reprehenderit, enim eiusmod high life
</div>
<div id="theFooter2" class="panel-footer shrinkme collapse in">
<button class="btn btn-default">
<span class="glyphicon glyphicon-tree-deciduous"></span>
</button>
</div>
</div>
jsFiddle demonstrating both selectors
Am I doing something that's keeping .collapsed from being applied? How can I collapse the body and footer when the heading is clicked?

Answer 1

bootstrap only adds the class to there is #id or href and not class.
according to the docs you are suppose to target the collapse using two options
data-toggle="collapse" href="#collapseExample"
or
data-toggle="collapse" data-target="theBody2"
this way you do not have to add a cursor:pointer manually as well

Answer 2

Actually, the there is an workaround, the data-target works with class selector but really doesn't change the parent class.
On the parent element you can handle onClick event, like:
onClick="(e) => { e.currentTarget.classList.contains("collaspsed") ? e.currentTarget.classList.remove("collaspsed") : e.currentTarget.classList.add("collaspsed"); }"

Answer 3

Here's the answer:
Make the footer panel a child of the body panel.
Use class panel-collapse on the body panel instead of panel
The first item is the key; the second one is for proper styling. I stumbled upon the solution by reading this issue.
Here is the revised jsFiddle with the updated HTML.
Updated HTML
<div class="panel">
<div id="theHeader" class="panel-heading collapsible" data-target="#theBody" data-toggle="collapse">Collapse using id as the selector</div>
<div id="theBody" class="panel-collapse collapse in">nim pariatur cliche reprehenderit, enim eiusmod high life.
<div id="theFooter" class="panel-footer collapse in">
<button class="btn btn-default"> <span class="glyphicon glyphicon-grain"></span>
</button>
</div>
</div>
</div>