javascript - How can I attach an event to the selection of Bootstrap collapsing panel? -

in following code, there bootstrap collapsible panel no list, doesn't expand or contract. how can attach event selection of panel?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  <div class="panel-group">              <div class="panel panel-default" id="leftsidemenu">      <div class="panel-heading" id="aboutcollapsepanel">                      <h4 class="panel-title">                          <a data-toggle="collapse" href="#collapseabout"  data-target="tabsabout" >about</a>                      </h4>                  </div>                  <div id="collapseabout" class="panel-collapse collapse">                    </div>        	     </div>  </div>

my non-working attempt follows:

$("#aboutcollapsepanel").on('show.bs.collapse', function () {     alert("collapse panel activated"); });  $("#aboutcollapsepanel").on('hide.bs.collapse', function () {     alert("collapse panel deactivated"); }); 

how can data-target value of panel, in case tabsabout, jqueryui tab widget. goal id , pass on javascript function makes visible, , function has signature function performlistitemaction(item) item value of data-target panel click.

thank you.

why not adding onclick?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  <script>  function performlistitemaction(item) {  alert(item);  }  </script>  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  <div class="panel-group">              <div class="panel panel-default" id="leftsidemenu">      <div class="panel-heading" id="aboutcollapsepanel">                      <h4 class="panel-title">                          <a data-toggle="collapse" href="#collapseabout"  data-target="tabsabout" onclick="performlistitemaction('tabsabout')">about</a>                      </h4>                  </div>                  <div id="collapseabout" class="panel-collapse collapse">                    </div>        	     </div>  </div>