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

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.

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.

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>

Those who wants to place a "close" button inside the collapsible panel to collapse panel back, you can use following snippet:

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <h2>Collapsible Panel</h2>
    <p>Click on the collapsible panel to open and close it.</p>
    <div class="panel-group">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" href="#collapse1">Collapsible panel</a>

          </h4>
        </div>
        <div id="collapse1" class="panel-collapse collapse">
          <div class="panel-body">Panel Body</div>
          <div class="panel-footer">
            <button type="button" data-target="#collapse1" data-toggle="collapse">Close</button>
          </div>
        </div>
      </div>
    </div>
  </div>

</body>

</html>

来源：https://stackoverflow.com/questions/25367356/how-can-i-dismiss-a-bootstrap-panel-using-data-dismiss

标签

javascript

twitter-bootstrap

panel