Bootstrap Collapsable panels toggle a show detail/hide detail label

Question

I am using Bootstrap and I have a page with several collapsable panels on it; by default the first panel is open.

I have been told it won't be obvious to the user to click the panel header to see the information contained in each collapsable panel so now I need to add a label that says "show detail" when collapsed and "hide detail" when opened.

Problems: the jquery script I am using toggles the showing of the "hide detail" label on all the panels no matter which one is clicked.

Also, if the user clicks on another panel, the previous panel closes but doesn't toggle the showing of "show detail" again.

Finally, I'd like the entire panel header to be the dive that when clicked toggles on and off the show and hide detail label.

Here's some html:

<div class="panel panel-default">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
<div class="panel-heading"><h4 class="panel-title">Overview 
<span class="more-detail" style="float:right; font-size:10px; display:none;">Show Detail     
<span class="glyphicon glyphicon-chevron-down"></span></span>
<span class="more-detail" style="float:right; font-size:10px;">Hide Detail 
<span class="glyphicon glyphicon-chevron-up"></span></span>
</h4>
</div>
</a>

<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body" id="overview-div">
Overview text here
</div>
</div>

Here's my fiddle

I think I am probably going about this the wrong way; maybe should be using toggle class?

Answer 1

I figured this out; there were lots of previous answers on this issue. Sorry for posting.

I needed to use

$('#myCollapsible').on('hidden.bs.collapse', function () {
// do something…
})

Here's my updated fiddle