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

I used Bootstrap version 3 and fontAwesome.

    <div class="panel panel-default">
<div class="panel-heading"><a data-toggle="collapse" href="#id_panel" aria-expanded="true">
        <div class="panel-title">     
            <i class="fa fa-th-list" aria-hidden="true"></i>  Formulario 
            <i class="fa fa-minus-square pull-right" aria-hidden="true"></i>
            <i class="fa fa-plus-square pull-right" aria-hidden="true"></i>
        </div>
    </a></div></div>

And your content div.

<div class="panel-collapse collapse in" id="id_panel" aria-expanded="true">
...content
</div>

Answer 2

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.