How can I dismiss a bootstrap panel using data-dismiss?

Question

I have a button which opens a panel and I want to be able to close it like I would with an alert.

The Default panel example from bootstrap docs

<div class="panel panel-default">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    Panel content
  </div>
</div>

If I add a close button as documented for an alert to the panels header, the button removes the header only.

Answer 1

You can do this by using an undocument feature to set the target of the dismiss action...

<button type="button" class="close" 
data-target="#id_of_panel" 
data-dismiss="alert">
<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
</button>

This will make the close button close the panel as opposed to its parent element.